/* CoffeeDaddy — settings page styles.
 * Extracted verbatim from the inline <style> in settings.html (Phase 5). */
/* Playfair for the page title */
  .page-title{font-family:'Playfair Display',serif;font-weight:700;letter-spacing:-.01em}

  main{max-width:780px;margin:0 auto;padding:24px 20px 60px}
  .page-title{font-size:26px;margin-bottom:6px}
  .page-sub{color:var(--ink-soft);font-size:14px;margin-bottom:24px}

  .set-section{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);padding:20px 22px;margin-bottom:18px;
  }
  .set-section h2{font-size:17px;margin-bottom:5px}
  .set-section .set-desc{color:var(--ink-soft);font-size:13.5px;margin-bottom:16px;line-height:1.5}
  /* Version readout. Monospaced so two numbers line up and can be compared;
     muted with colour and weight rather than opacity, which has failed AA on
     small text in this app three times. */
  .set-build{
    font-family:'DM Mono',monospace;font-size:12px;color:var(--ink-soft);
    margin:-8px 0 16px;letter-spacing:.01em;
  }
  .set-actions{display:flex;flex-wrap:wrap;gap:10px}
  .btn{
    display:inline-flex;align-items:center;gap:8px;border-radius:11px;
    padding:11px 16px;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;
    transition:transform .06s ease, filter .15s ease;
    box-shadow:var(--shadow-sm);
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:linear-gradient(145deg,var(--btn-a),var(--btn-b));color:#fff;border:none}
  .btn-primary:hover{filter:brightness(1.06)}
  .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
  .btn-ghost:hover{background:var(--surface-2)}
  .btn svg{flex:none}

  .about-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
  .about-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
  .about-list b{color:var(--ink)}
  .about-list svg{flex:none;color:var(--accent-ink);margin-top:3px}

  /* Changelog */
  .changelog{display:flex;flex-direction:column;gap:0}
  .cl-entry{
    position:relative;padding:14px 0 14px 20px;
    border-left:2px solid var(--line);
    margin-left:6px;
  }
  .cl-entry::before{
    content:'';position:absolute;left:-5px;top:18px;
    width:8px;height:8px;border-radius:50%;
    background:var(--caramel);border:2px solid var(--surface);
  }
  .cl-entry:first-child::before{background:var(--espresso)}
  .cl-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}
  .cl-version{
    font-size:11px;font-weight:700;letter-spacing:.04em;
    background:var(--espresso);color:var(--vanilla);
    border-radius:6px;padding:2px 7px;
  }
  html[data-theme="dark"] .cl-version{background:var(--caramel);color:#1C120A}
  .cl-date{font-size:12px;color:var(--ink-soft)}
  .cl-title{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:8px}
  .cl-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:5px}
  .cl-list li{font-size:13px;color:var(--ink-soft);line-height:1.5}
  .cl-list b{color:var(--ink)}

  .about-creator{
    display:flex;align-items:center;gap:14px;
    padding:16px;margin-bottom:4px;
    background:linear-gradient(135deg,var(--vanilla) 0%,var(--surface-2) 100%);
    border-radius:12px;border:1px solid var(--line);
  }
  .about-logo-wrap{flex:none}
  .about-logo{width:48px;height:48px;border-radius:12px;object-fit:contain;box-shadow:0 2px 8px rgba(44,26,14,.12)}
  .about-tagline{font-family:'Playfair Display',serif;font-weight:700;font-size:15px;color:var(--ink);margin-bottom:4px}
  .about-credit{font-size:13px;color:var(--ink-soft)}
  .about-link{
    display:inline-flex;align-items:center;gap:4px;
    color:var(--accent-ink);text-decoration:none;font-weight:600;
  }
  .about-link:hover{text-decoration:underline}

  footer{text-align:center;padding:0 20px 30px;color:var(--ink-soft);font-size:12.5px}
  footer a{color:var(--accent-ink);text-decoration:none}
  footer a:hover{text-decoration:underline}

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

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

    main{padding:18px 14px 16px}
    .page-title{font-size:22px}
    .set-section{padding:16px 16px}
    .set-section h2{font-size:16px}
    .btn{padding:12px 14px;font-size:13.5px}

    .bottom-nav{
      display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
      background:var(--surface);border-top:1px solid var(--line);
      padding:7px 4px calc(7px + env(safe-area-inset-bottom));
      box-shadow:0 -4px 16px rgba(58,36,26,.06);
    }
    .bottom-nav a{
      flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
      padding:6px 4px;color:var(--ink-soft);text-decoration:none;
      font-size:10.5px;font-weight:600;letter-spacing:.2px;
    }
    .bottom-nav a.active{color:var(--accent-ink)}
    .bottom-nav a svg{width:22px;height:22px}
  }

/* 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-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;
}

  /* ---------- Footer: "More apps from OuiDaddy" ----------
     Replaces the old credit line. The mark ships as two artworks rather than
     being filtered at runtime, same as the CoffeeDaddy wordmark: the light one
     carries a rust plate with cream letters, the dark one inverts to a white
     plate with dark letters, and neither survives being recoloured by CSS.
     The whole thing is one link, so the wordmark and the words before it share
     a single 44px target instead of only the image being tappable. */
  .oui-link{
    display:inline-flex;align-items:center;gap:9px;
    min-height:44px;padding:4px 2px;
    color:var(--ink-soft);text-decoration:none;
    font-size:13px;font-weight:600;letter-spacing:.1px;
  }
  .oui-link span{line-height:1}
  .oui-mark{height:19px;width:auto;display:block}
  .oui-link:hover .oui-mark{filter:brightness(1.05)}
  .oui-link:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:8px}

  /* ---------- Changelog: collapsible (v1.21.0) ----------
     Sixteen releases expanded made Settings nearly 9000px tall, most of it
     history nobody was reading. Each release is a <details> now — native
     disclosure, so it works with no script and the CSP stays strict, and the
     browser's own find-in-page can still open a closed one. The version, date
     and release title stay visible while collapsed, so the list is still
     scannable; only the bullets fold away. The newest is open on arrival. */
  .cl-sum{
    display:flex;flex-direction:column;gap:3px;
    cursor:pointer;list-style:none;
    padding:3px 26px 3px 0;min-height:44px;justify-content:center;
    position:relative;
  }
  .cl-sum::-webkit-details-marker{display:none}   /* Safari's default triangle */
  .cl-entry .cl-meta{margin-bottom:0}
  .cl-entry .cl-title{margin-bottom:0;font-size:14px}
  /* Own chevron, rotated when open. */
  .cl-sum::after{
    content:'';position:absolute;right:4px;top:50%;
    width:7px;height:7px;margin-top:-5px;
    border-right:2px solid var(--ink-soft);
    border-bottom:2px solid var(--ink-soft);
    transform:rotate(45deg);
    transition:transform .18s ease;
  }
  .cl-entry[open] > .cl-sum::after{transform:rotate(-135deg);margin-top:-2px}
  .cl-sum:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:8px}
  .cl-entry[open] > .cl-list{margin-top:9px}
  /* The timeline dot lined up with a taller fixed header; re-anchor it to the
     summary row now that the row's height is the summary's. */
  .cl-entry::before{top:24px}