/* Mobile layout (phones, 700px and narrower). Loaded last.
   - the spiral notebook becomes a plain full-width card, so content gets the whole screen
   - the three section tabs become a bottom tab bar you can reach with your thumb
   - sales become tappable cards
   - popups slide up from the bottom as sheets */
@media(max-width:700px){

  /* ---------- page shell ---------- */
  header nav{padding-top:10px;padding-bottom:10px}
  .brand img{width:84px}
  main{padding-top:20px;padding-bottom:28px}
  #dashboard,#overview,#newsale{padding:12px max(12px,env(safe-area-inset-right,0px)) 20px max(12px,env(safe-area-inset-left,0px))}
  body:is([data-view="dashboard"],[data-view="overview"],[data-view="newsale"]){padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  body:is([data-view="dashboard"],[data-view="overview"],[data-view="newsale"]) footer{display:none}

  /* ---------- notebook -> card ---------- */
  .notebook{padding:18px 16px 22px;gap:14px;border-radius:18px;
    box-shadow:0 1px 2px rgba(36,60,48,.06),0 10px 28px -14px rgba(36,60,48,.22)}
  .notebook::before{display:none}
  /* list pages: cards sit straight on the page instead of a card inside a card */
  #dashboard .notebook,#overview .notebook{background:transparent;border:0;box-shadow:none;padding:2px 0 8px}
  .notebook .empty{padding:28px 0}
  .dash-head h1{font-size:28px}
  .dash-sub{margin-top:4px;font-size:14.5px}

  /* ---------- bottom tab bar ---------- */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:stretch;align-items:stretch;gap:0;
    padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
    background:rgba(255,254,251,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px rgba(36,60,48,.3)}
  .tabs .tab[data-go]{flex:1 1 0;min-width:0;min-height:62px;margin:0;padding:9px 4px 8px;border:0;border-radius:0;
    background:transparent;transform:none;filter:none;position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.01em;line-height:1.1;white-space:nowrap}
  .tabs .tab[data-go]::before{content:"";width:24px;height:24px;background:currentColor;
    -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
  .tabs .tab[data-go="overview"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
  .tabs .tab[data-go="dashboard"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 14l2 2 4-4'/%3E%3C/svg%3E")}
  .tabs .tab[data-go="portal"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
  .tabs .tab[data-go].on{color:var(--pine);padding-top:9px;cursor:default}
  .tabs .tab[data-go].on::after{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 4px 4px;background:var(--pine)}
  /* the bar steps aside while the keyboard is up */
  body:has(input:focus,select:focus,textarea:focus) .tabs{display:none}
  body:has(input:focus,select:focus,textarea:focus):is([data-view="dashboard"],[data-view="overview"],[data-view="newsale"]){padding-bottom:20px}

  /* floating things sit above the bar */
  .pager{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  body:has(.pager:not([hidden])) .toast{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
  .listings:has(+ .pager:not([hidden])){padding-bottom:64px}

  /* ---------- Sale Board header: compact grid ---------- */
  #ovHead{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  #ovHead>*{min-width:0;margin:0}
  #ovHead>div:first-child,#ovHead>.summary,#ovHead>.search-box,#ovHead>.view-toggle,#ovHead>.ov-clear{grid-column:1 / -1}
  #ovHead>.ov-breed{flex:none}
  #ovHead.cal-mode>.ov-breed{grid-column:1 / -1}
  #ovHead .search-box input{padding:11px 16px 11px 44px;box-shadow:none}
  #ovHead .ov-breed select{min-width:0;width:100%;max-width:none;padding:11px 32px 11px 14px;font-weight:600;font-size:15px;box-shadow:none;border-width:1px;border-color:var(--field);background-position:right 14px center}
  #ovHead .ov-clear{justify-self:start}
  .summary{padding:10px 0}

  /* ---------- Submitted Sale header ---------- */
  #dashboard .dash-head{flex-direction:column;align-items:stretch;gap:12px}
  #dashboard .dash-head>.summary{order:1;margin:0!important}
  #dashboard .dash-head>.search-box{order:2}
  #dashboard .dash-head>.filter-group{order:3}
  #dashboard .dash-head>#dashNew{order:4}
  .search-box input{padding:11px 16px 11px 44px;box-shadow:none}
  .filter-group,.dash-tools,.tool-right{min-width:0;width:100%;max-width:100%}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0;padding:2px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .dash-tools select{width:100%}

  /* ---------- sales as cards ---------- */
  .listings{border-top:0;gap:10px}
  .listing{padding:14px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;
    box-shadow:0 1px 2px rgba(36,60,48,.04);transition:background .15s,transform .15s}
  .listing:active{background:var(--sage);transform:scale(.995)}
  .l-title{font-size:18.5px;line-height:1.25}
  .l-assoc{font-size:14px}

  /* Submitted Sale card: title, host, then breed + date on one line, submitted date last */
  .listing.sale-row{grid-template-columns:auto auto minmax(0,1fr) 40px;gap:6px 10px;align-items:center;padding:14px}
  .sale-row>*{grid-column:auto}
  .sale-row .l-main{grid-column:1 / 4;grid-row:1}
  .sale-row .kebab{grid-column:4;grid-row:1 / span 2;align-self:start;justify-self:end;margin:-6px -8px 0 0}
  .sale-row .l-breed{grid-column:1;grid-row:2;padding:3px 11px;border-radius:999px;background:var(--sage);color:var(--pine);font-size:13px;font-weight:600}
  .sale-row .l-breed.blank{display:none}
  .sale-row .l-date{grid-column:2;grid-row:2;font-size:14px;color:var(--muted)}
  .sale-row .l-date.blank{display:none}
  .sale-row .l-sub,.sale-row>.l-sub:nth-last-child(1){grid-column:1 / 4;grid-row:3;margin:0;font-size:12.5px;font-weight:500;color:var(--muted)}
  .sale-row .l-cell{white-space:normal}

  /* Sale Board card: title, host, then status pill + date */
  .listing.ov-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px}
  .ov-row .side{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;text-align:left}
  .ov-row .side .when{font-size:15.5px}

  /* calendar */
  .cal-main{margin:0 -4px}
  .cal-item{padding:12px 6px}

  /* ---------- New sale form ---------- */
  #newsale .notebook{padding-top:20px}
  #newsale #formHead h2{font-size:26px}
  #newsale .form-intro{font-size:15px}
  #newsale .ns-wrap #formWrap{padding:0}
  #newsale .step h3{font-size:21px}
  #newsale label{margin-top:16px}
  #newsale .btn-row{margin-top:22px;gap:10px}
  #newsale .btn-row .btn:last-child{flex:none}

  /* ---------- popups become bottom sheets ---------- */
  .modal{align-items:flex-end;padding:0}
  .modal-card,.modal-card.narrow,#profileCard,#detailCard{max-width:none;width:100%;max-height:92dvh;
    border-radius:22px 22px 0 0;border-bottom:0;
    padding:26px 18px calc(22px + env(safe-area-inset-bottom,0px));animation:sheetup .28s cubic-bezier(.2,.8,.2,1)}
  .modal-card::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--field);margin:-14px auto 14px}
  .modal-x{top:14px;right:14px}
  #confirmModal,#logoutModal{align-items:flex-end}
  #confirmModal .btn-row,#logoutModal .btn-row{flex-direction:column-reverse}
  .modal-backdrop{animation:fade .2s ease}
  .toast{max-width:calc(100vw - 28px)}
}
@keyframes sheetup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.modal-card{animation:none!important}}