/* CoffeeDaddy — index page styles.
 * Extracted verbatim from the inline <style> in index.html (Phase 5). */
/* Playfair for page-level headings; DM Mono for numeric badges */
  .ribbon, .spec b, .stat b{font-family:'DM Mono',monospace;letter-spacing:-.01em}

  /* ---------- Layout ---------- */
  main{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
  .page-title{font-family:'Playfair Display',serif;font-weight:700;font-size:26px;
    letter-spacing:-.01em;margin-bottom:16px}

  .toolbar{
    display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;
  }
  .search{
    flex:1 1 200px;display:flex;align-items:center;gap:8px;
    background:var(--surface);border:1px solid var(--line);border-radius:11px;
    padding:0 12px;box-shadow:var(--shadow-sm);
  }
  .search input{border:none;outline:none;background:none;padding:11px 0;width:100%;color:var(--ink)}
  select.sort{
    background:var(--surface);border:1px solid var(--line);border-radius:11px;
    padding:11px 12px;color:var(--ink);box-shadow:var(--shadow-sm);outline:none;
  }
  .btn{
    display:inline-flex;align-items:center;gap:7px;border-radius:11px;
    padding:11px 15px;font-size:14px;font-weight:600;white-space:nowrap;
    transition:transform .06s ease, filter .15s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:linear-gradient(145deg,var(--btn-a),var(--btn-b));color:#fff;box-shadow:var(--shadow-sm)}
  .btn-primary:hover{filter:brightness(1.06)}
  .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .btn-ghost:hover{background:var(--surface-2)}
  .btn-dark{background:var(--espresso);color:var(--on-espresso)}
  .btn-dark:hover{filter:brightness(1.15)}

  /* ---------- Roaster filter bar ---------- */
  .filterbar{
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:10px 14px;margin-bottom:16px;box-shadow:var(--shadow-sm);font-size:14px;
  }
  .filterbar .fb-text b{color:var(--accent-ink)}
  .filterbar .fb-icon{color:var(--accent-ink);flex:none}
  .filterbar .fb-clear{
    margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-soft);
    background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
    padding:7px 12px;cursor:pointer;
  }
  .filterbar .fb-clear:hover{background:var(--bg-grad);color:var(--ink)}

  /* ---------- Bean grid ---------- */
  .grid{
    display:grid;gap:16px;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  }
  .card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);padding:16px 16px 14px;display:flex;flex-direction:column;gap:11px;
    transition:box-shadow .15s ease, transform .1s ease;
  }
  .card{cursor:pointer}
  .card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
  /* ---------- Bean detail modal ---------- */
  .detail-roaster{font-size:13.5px;font-weight:600;color:var(--accent-ink);margin-bottom:10px}
  .detail-ref{display:inline-block;font-size:13px;font-weight:600;margin-bottom:12px}
  .detail-refnote{font-size:12.5px;color:var(--ink-soft);margin-bottom:12px;word-break:break-word}
  .detail-sec h4{
    font-size:12px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--ink-soft);margin:14px 0 8px;
  }
  .detail-actions{display:flex;gap:8px;margin-top:16px}
  .detail-actions .btn{flex:1;justify-content:center;padding:12px 8px}
  .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .card-title b{font-size:17px;display:block;line-height:1.25}
  .card-title span{font-size:13px;color:var(--ink-soft)}
  .roaster-link{
    display:inline-flex;align-items:center;gap:5px;margin-top:3px;
    font-size:12.5px;font-weight:600;color:var(--accent-ink);
    background:none;border:none;padding:1px 0;cursor:pointer;text-align:left;
  }
  .roaster-link svg{opacity:.75;flex:none}
  .roaster-link:hover{text-decoration:underline}
  .ribbon{
    flex:none;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    background:var(--surface-2);color:var(--accent-ink);border:1px solid var(--line);
    border-radius:999px;padding:4px 9px;
    display:inline-flex;align-items:center;gap:5px;
  }
  .ribbon .m-ico{width:12px;height:12px;flex:none}
  .specs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .spec{background:var(--surface-2);border-radius:10px;padding:8px 6px;text-align:center}
  .spec b{display:block;font-size:15px}
  .spec span{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft)}
  .stars{position:relative;display:inline-block;font-size:0;line-height:0;white-space:nowrap}
  .stars .layer{display:inline-block}
  .stars .top{position:absolute;left:0;top:0;overflow:hidden}
  .star{width:17px;height:17px;display:inline-block}
  .rate-row{display:flex;align-items:center;gap:8px}
  .rate-row small{color:var(--ink-soft);font-size:12px}
  /* If the bean's Ref field is a URL, the coffee name itself becomes the link */
  .card-title a{color:inherit;text-decoration:none;display:inline}
  .card-title a:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
  .card-title a:focus-visible{outline:2px solid var(--caramel);outline-offset:3px;border-radius:4px}
  .notes-line{font-size:12.5px;color:var(--ink-soft);font-style:italic;border-left:3px solid var(--line);padding-left:8px}
  /* A row someone else owns. Without this the missing Edit/Delete buttons just
     look like a bug; the point is to say "view only" rather than stay silent. */
  .not-mine{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-soft);opacity:.75;
  }
  .not-mine svg{opacity:.7}
  .card-actions{display:flex;gap:7px}
  .card-actions .btn{flex:1;justify-content:center;padding:10px 8px}
  .icon-btn{
    width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
  }
  .icon-btn:hover{background:var(--bg-grad);color:var(--ink)}
  .icon-btn.danger:hover{color:var(--red)}

  .empty{
    text-align:center;padding:50px 22px 44px;color:var(--ink-soft);
    background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
  }
  .empty-illust{
    width:84px;height:84px;margin:0 auto 14px;
    background:linear-gradient(140deg,var(--surface-2),var(--bg-grad));
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:var(--accent-ink);
  }
  .empty-illust svg{width:42px;height:42px;opacity:1}
  .empty h3{font-size:18px;color:var(--ink);margin-bottom:6px;font-weight:700}
  .empty p{font-size:13.5px;line-height:1.55;max-width:340px;margin:0 auto 16px}
  .empty .empty-tip{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
    padding:6px 12px;font-size:12px;color:var(--ink-soft);
  }
  .empty .empty-tip b{color:var(--ink)}
  .empty svg{margin-bottom:10px}

  /* ---------- Phase 1: freshness, cost, open marker, brew log ---------- */
  .meta-line{display:flex;flex-wrap:wrap;gap:6px}
  .chip{
    font-size:11.5px;font-weight:600;border-radius:8px;padding:3px 9px;
    background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);
  }
  .chip.peak{background:#e6f0e3;color:#3f7339;border-color:#cfe3c9}
  .chip.warn{background:#f7e9d4;color:#9d6a1f;border-color:#ecd6b0}
  .chip.open{background:var(--espresso);color:var(--on-espresso);border-color:var(--espresso)}
  /* Bean of the moment — Vanilla badge + Honey border per design system */
  .card.featured{
    border-color:var(--gold);
    box-shadow:0 6px 22px rgba(200,136,42,.18),0 2px 8px rgba(44,26,14,.08);
  }
  .featured-pill{
    display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
    font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    color:#A86820;background:var(--vanilla);
    border:1px solid #F3E2BD;
    border-radius:999px;padding:4px 11px;
  }
  .featured-pill svg{flex:none;width:11px;height:11px;color:var(--gold)}
  .field label.check{
    display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;
    font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;margin-bottom:0;
  }
  .field label.check input{width:auto;margin:0;flex:none}
  .brew-add{
    display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:13px;
  }
  .brew-add .full{grid-column:1 / -1}
  .brew-add label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.4px;color:var(--ink-soft);margin-bottom:3px}
  .brew-add input{
    width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px;
    background:#fff;color:var(--ink);outline:none;font-size:14px;
  }
  .brew-add input:focus{border-color:var(--caramel)}
  .brew-list{display:flex;flex-direction:column;gap:8px}
  .brew-item{
    display:flex;gap:10px;align-items:flex-start;
    border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  }
  .brew-item .bi-main{flex:1;min-width:0}
  .bi-date{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}
  .bi-stats{font-size:14px;font-weight:600;margin-top:2px}
  .bi-note{font-size:12.5px;color:var(--ink-soft);font-style:italic;margin-top:3px;word-break:break-word}
  .bi-del{
    width:30px;height:30px;flex:none;border-radius:8px;background:var(--surface-2);
    border:1px solid var(--line);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
  }
  .bi-del:hover{background:var(--bg-grad);color:var(--red)}
  .brew-empty{text-align:center;color:var(--ink-soft);font-size:13px;padding:20px 10px}
  .log-shot{font-size:13.5px;font-weight:600;color:var(--accent-ink);
    text-decoration:underline;background:none;border:none;cursor:pointer;margin-top:10px}

  /* ---------- Modal ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(34,20,12,.55);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;padding:18px;z-index:50;
  }
  .overlay.open{display:flex}
  .modal{
    background:var(--surface);border-radius:20px;box-shadow:0 24px 60px rgba(20,10,4,.4);
    width:100%;max-width:440px;max-height:92vh;overflow:auto;
  }
  .modal-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);
  }
  .modal-head h2{font-size:18px}
  .modal-body{padding:18px 20px 22px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;color:var(--ink-soft);margin-bottom:5px}
  .field input,.field textarea{
    width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
    background:var(--surface-2);color:var(--ink);outline:none;
  }
  .field input:focus,.field textarea:focus{border-color:var(--caramel);background:#fff}
  .field textarea{resize:vertical;min-height:58px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .hint{font-size:11.5px;color:var(--ink-soft);margin-top:4px}
  .star-input{display:flex;align-items:center;gap:3px}
  .star-input .si{width:30px;height:30px;cursor:pointer;color:var(--line)}
  .star-input .si.on{color:var(--gold)}
  .star-input .clear{margin-left:8px;font-size:12px;color:var(--ink-soft);text-decoration:underline}
  .modal-foot{display:flex;gap:10px;margin-top:6px}
  .modal-foot .btn{flex:1;justify-content:center;padding:12px}
  /* "More details" disclosure inside the bean form */
  .form-more{
    border:1px solid var(--line);border-radius:11px;background:var(--surface-2);
    padding:0 12px;margin-bottom:14px;
  }
  .form-more summary{
    display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
    padding:11px 1px;font-size:12.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;color:var(--ink-soft);user-select:none;
  }
  .form-more summary::-webkit-details-marker{display:none}
  .form-more summary:hover{color:var(--ink)}
  .form-more summary .chev{flex:none;transition:transform .2s ease}
  .form-more[open] summary .chev{transform:rotate(180deg)}
  .form-more[open]{padding-bottom:4px}
  .form-more .field input{background:var(--surface)}

  /* ---------- Timer ---------- */
  .timer-modal{max-width:380px;text-align:center}
  .timer-sub{font-size:13px;color:var(--ink-soft);margin-bottom:2px}
  .timer-bean{font-size:18px;font-weight:700;margin-bottom:14px}
  .ring-wrap{
    position:relative;width:240px;height:240px;max-width:78vw;max-height:78vw;margin:0 auto 6px;
    cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
    border-radius:50%;transition:transform .12s ease;
  }
  .ring-wrap:active{transform:scale(.97)}
  .ring-wrap:focus-visible{outline:2px solid var(--caramel);outline-offset:6px}
  .ring-wrap svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
  .ring-time{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
  }
  .ring-time .big{font-size:52px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px}
  .ring-time .lbl{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft)}
  .adjust{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 4px}
  .adjust button{
    width:40px;height:40px;border-radius:50%;background:var(--surface-2);
    border:1px solid var(--line);font-size:20px;font-weight:700;color:var(--ink);
  }
  .adjust button:hover{background:var(--bg-grad)}
  .adjust .val{font-size:14px;color:var(--ink-soft);min-width:120px}
  .timer-controls{display:flex;gap:10px;margin-top:12px}
  .timer-controls .btn{flex:1;justify-content:center;padding:13px;font-size:15px}
  .save-target{margin-top:10px;font-size:13px;color:var(--accent-ink);
    text-decoration:underline;display:inline-block}
  .timer-modal.done .ring-time .big{color:var(--green)}
  @keyframes flash{0%,100%{background:var(--surface)}50%{background:#d9efd6}}
  .timer-modal.done{animation:flash .55s ease 6}

  .x-btn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
    justify-content:center;color:var(--ink-soft);background:var(--surface-2)}
  .x-btn:hover{background:var(--bg-grad);color:var(--ink)}

  .toast{
    position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);
    background:var(--espresso);color:var(--on-espresso);padding:12px 20px;border-radius:12px;
    box-shadow:var(--shadow);font-size:14px;z-index:80;opacity:0;transition:all .3s ease;
    max-width:calc(100% - 32px);
  }
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
  /* Undo toast: inline action button on the right */
  .toast.with-action{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px}
  .toast .toast-action{
    background:transparent;border:1px solid rgba(246,234,217,.55);
    color:var(--on-espresso);font-weight:700;font-size:13px;letter-spacing:.3px;
    padding:7px 13px;border-radius:9px;cursor:pointer;font-family:inherit;
    transition:background .15s;flex:none;
  }
  .toast .toast-action:hover{background:rgba(246,234,217,.16)}

  footer{text-align:center;padding:0 20px 30px;color:var(--ink-soft);font-size:12.5px}

  /* ---------- Mobile polish (phone screens) ---------- */
  @media(max-width:640px){
    /* Tighter header on mobile */
    header{padding:10px 14px}
    .header-inner{gap:9px}

    /* FAB and bottom-nav handled by theme.css glass-nav section */
    /* Hide the toolbar Add button on phones — FAB takes over */
    #addBtn{display:none}
    /* Quick timer shrinks to an icon so it shares a row with the sort chips */
    #quickTimerBtn{padding:11px 13px}
    #quickTimerBtn .qt-label{display:none}

    /* Sync pill collapses to just the colored dot */
    .sync{padding:9px;gap:0}
    .sync #syncText{display:none}

    /* Stats compress so the row fits next to the nav */
    .stats{margin-left:auto;gap:6px}
    .stat{padding:6px 10px;min-width:0;flex:0 0 auto}
    .stat b{font-size:17px}
    .stat span{font-size:10px}

    main{padding:14px 14px 60px}
    .toolbar{gap:8px}
    /* Tighter hero on phones */
    .now-brewing{gap:12px;padding:13px 14px;margin-bottom:14px}
    .nb-marker{width:46px;height:46px}
    .nb-marker svg{width:22px;height:22px}
    .nb-title{font-size:17px}
    .nb-brew-btn{padding:11px 14px;font-size:13.5px}
    .filterbar{padding:10px 11px;gap:7px}

    /* Bigger touch targets — Apple HIG 44pt minimum */
    .icon-btn{width:44px;height:44px}
    .roaster-link{padding:4px 8px;font-size:13px}
    .chip{padding:5px 11px;font-size:12px}
    .m-chip-pick{padding:8px 13px;font-size:13px}

    /* The hero already shows this bean — hide its duplicate card on phones.
       Tapping the hero opens the full detail view, so nothing is lost. */
    .card.hero-dup{display:none}

    /* Card breathing room + clearer hierarchy */
    .card{padding:15px 15px 14px;gap:13px}
    .card-title b{font-size:18px;line-height:1.22}
    .meta-line{gap:7px}

    /* Modal: more comfortable taps on small screens */
    .modal-head{padding:16px 18px}
    .modal-body{padding:16px 18px 20px}
    .field input,.field textarea{padding:12px 13px;font-size:15px}
    .modal-foot .btn{padding:14px}

    /* Timer keeps its size on mobile */
    .ring-wrap{width:210px;height:210px}
    .ring-time .big{font-size:46px}
  }

  /* ---------- Brew method + bigger Brew button ---------- */
  .method-picker{display:flex;flex-wrap:wrap;gap:6px}
  .m-chip-pick{
    display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
    border-radius:999px;padding:6px 11px;cursor:pointer;
    background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);
  }
  .m-chip-pick.on{background:var(--espresso);color:var(--on-espresso);border-color:var(--espresso)}
  .m-ico{width:15px;height:15px;flex:none}
  .chip.m-chip{display:inline-flex;align-items:center;gap:4px}
  .chip.m-chip .m-ico{width:13px;height:13px}
  .card-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
  .brew-big{
    width:100%;justify-content:center;gap:8px;padding:14px 16px;
    font-size:16px;border-radius:12px;
  }
  /* Star fill colors (used by the rate display) */
  .star-e{fill:var(--line)}
  .star-f{fill:var(--gold)}

  /* ---------- "Now brewing" hero (top of home page) ---------- */
  .now-brewing{
    display:flex;align-items:center;gap:16px;
    background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);
    border:1px solid var(--gold);
    border-radius:var(--radius);
    padding:16px 18px;
    margin-bottom:18px;
    box-shadow:0 4px 14px rgba(200,136,42,.14),var(--shadow-sm);
    position:relative;
  }
  .nb-marker{
    width:56px;height:56px;border-radius:50%;
    background:var(--vanilla);
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-ink);flex:none;
    border:1px solid #F3E2BD;
  }
  .nb-marker svg{width:28px;height:28px}
  .nb-info{flex:1;min-width:0}
  .nb-label{
    font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;
    color:var(--gold-ink);font-weight:700;margin-bottom:2px;
    font-family:'DM Sans',sans-serif;
  }
  .nb-title{
    font-family:'Playfair Display',serif;
    font-size:20px;font-weight:700;color:var(--ink);
    line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .nb-meta{
    font-size:12.5px;color:var(--ink-soft);margin-top:3px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .nb-meta b{font-family:'DM Mono',monospace;color:var(--caramel);font-weight:500}
  .nb-actions{flex:none}
  .nb-brew-btn{
    padding:12px 20px;font-size:14.5px;gap:7px;
  }
  .sync-pop{position:absolute}
  .sync-pop{
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 6px 22px rgba(58,36,26,.20);padding:13px 14px 12px;
    min-width:220px;z-index:60;
    color:var(--ink);font-size:13px;font-weight:500;letter-spacing:0;
    cursor:default;text-transform:none;text-align:left;
  }
  .sync-pop[hidden]{display:none}
  .sync-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;font-weight:700;font-size:13.5px}
  .sync-pop-head .dot{width:10px;height:10px;border-radius:50%;background:#a08f7d;flex:none}
  .sync-pop.synced .dot{background:#5fb85a}
  .sync-pop.saving .dot{background:#e0a52e}
  .sync-pop.error .dot{background:#e0664a}
  .sync-pop.offline .dot{background:#a08f7d}
  .sync-pop-time{color:var(--ink-soft);font-size:12px;margin-bottom:11px}
  .sync-pop-err{
    color:var(--red);font-size:12px;margin-bottom:11px;font-style:italic;
    background:rgba(192,73,47,.08);border-radius:7px;padding:6px 9px;
  }
  .sync-pop-btn{
    width:100%;background:var(--surface-2);color:var(--ink);
    border:1px solid var(--line);border-radius:9px;padding:9px 12px;
    font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;
    transition:background .15s;
  }
  .sync-pop-btn:hover{background:var(--bg-grad)}

  /* ---------- Filter / sort chip row ---------- */
  .chip-row{
    display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:2px 1px;scrollbar-width:none;flex:1 1 auto;
  }
  .chip-row::-webkit-scrollbar{display:none}
  .chip-row .fchip{
    flex:none;display:inline-flex;align-items:center;gap:5px;
    font-size:13px;font-weight:600;border-radius:999px;padding:9px 14px;
    background:var(--surface);color:var(--ink-soft);border:1px solid var(--line);
    cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);
    transition:background .15s,color .15s,border-color .15s;
  }
  .chip-row .fchip:hover{background:var(--surface-2);color:var(--ink)}
  .chip-row .fchip.on{background:var(--espresso);color:var(--on-espresso);border-color:var(--espresso)}

  /* ---------- Floating Action Button (mobile primary CTA) ---------- */
  .fab{
    position:fixed;right:18px;bottom:18px;z-index:30;
    width:58px;height:58px;border-radius:50%;
    background:linear-gradient(145deg,var(--btn-a),var(--btn-b));color:#fff;
    display:none;align-items:center;justify-content:center;
    box-shadow:0 8px 22px rgba(189,123,62,.45);cursor:pointer;
    border:none;transition:transform .12s ease,filter .15s ease;
  }
  .fab:hover{filter:brightness(1.06)}
  .fab:active{transform:scale(.96)}
  .fab svg{width:26px;height:26px}

  /* ---------- Bottom navigation: replaced by .glass-nav in theme.css ---------- */
  .bottom-nav{display:none!important}

/* DES-07: a destructive control has to be distinguishable BEFORE the tap, not
   on hover — which never happens on a phone. These carried --red only in a
   :hover rule, so on touch they were indistinguishable from Edit sitting 12px
   away. */
.icon-btn.danger,
.mini-btn.danger,
.rev-ic.danger,
.rev-link.danger,
.bi-del{ color:var(--red); }

/* DES-05: Apple's minimum touch target is 44x44pt. Several controls are
   deliberately smaller than that visually — a 25px roaster chip would look
   absurd at 44px — so the HIT AREA is extended instead, with a transparent
   pseudo-element. Nothing moves; the tappable region just stops being 25px. */
.roaster-link, .tag-chip, .loc-tag, .mini-btn, .rev-ic, .rev-link,
.fchip, .tp-chip, .m-chip-pick, .seg button, .viewtoggle button,
.map-pin, .theme-seg button{
  position:relative;
}
.roaster-link::after, .tag-chip::after, .loc-tag::after, .mini-btn::after,
.rev-ic::after, .rev-link::after, .fchip::after, .tp-chip::after,
.m-chip-pick::after, .seg button::after, .viewtoggle button::after,
.map-pin::after, .theme-seg button::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:max(100%, 44px);
  height:max(100%, 44px);
  /* Purely a hit area: never paints, never affects layout. */
  background:transparent;
  pointer-events:auto;
}
/* The search field is 42px; two more pixels costs nothing and clears the bar. */
.search input, input[type="search"]{ min-height:44px; }

/* DES-12: DM Mono draws 0 with a slash. In a 27px stat tile that reads as an
   error symbol rather than a number — and there is no capital O next to it for
   the slash to be disambiguating. Off for display figures; the genuinely
   tabular readouts (brew times) keep the mono face and are small enough that
   the slash never reads as anything else. */
.statbox b, .stat b, .hv, .ring-num{
  font-variant-numeric: lining-nums;
  font-feature-settings: "zero" 0;
}

/* DES-04: the brew-time ribbon measured 4.36:1 — close, but 11px bold still
   needs 4.5. A slightly deeper amber clears it without changing the look. */
html[data-theme="dark"] .ribbon{ background:#C8892A; color:#1C120A; }

/* DES-05, second pass. Extending the hit area with a pseudo-element works where
   a control has room around it, but in a tight horizontal row the expanded
   boxes of neighbouring chips overlap and whichever sits on top wins — so the
   probe lands on the wrong chip and the target is no better than before.
   Measured: 7 of 15 small controls were genuinely covered that way.

   For toolbar controls the honest fix is real height. They are primary
   controls, 44px suits them, and nothing about the layout suffers. The small
   in-card metadata chips (tags, city, roaster) keep the pseudo-element: making
   those 44px tall would look absurd, and their vertical reach is what matters.*/
.fchip, .seg button, .viewtoggle button, .theme-seg button,
.chip-row .fchip, .sortbar button{
  min-height:44px;
}