/* The public catalogue's typefaces, so the Typeface picker in Site settings
   can show each pairing in the face it actually is. */
@import url("/static/fonts/fonts.css");

:root {
  --brand: #1d4ed8;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --card: #ffffff;
  --ok: #059669;
  --warn: #b45309;
  --bad: #dc2626;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

/* ---------------------------------------------------------------- layout */
.shell { display: flex; min-height: 100vh; }

.side {
  width: 232px;
  flex: 0 0 232px;
  background: var(--ink);
  color: #cbd5e1;
  padding: 1rem .75rem;
}
.side .logo {
  color: #fff; font-weight: 700; font-size: 1.05rem;
  padding: .35rem .5rem 1rem; display: block;
}
.side .logo:hover { text-decoration: none; }
.side .logo span { display: block; font-size: .72rem; font-weight: 400; color: #94a3b8; }
.side nav a {
  display: block; padding: .5rem .6rem; border-radius: 7px;
  color: #cbd5e1; font-size: .9rem; margin-bottom: 1px;
}
.side nav a:hover { background: #1e293b; color: #fff; text-decoration: none; }
.side nav a.on { background: var(--brand); color: #fff; font-weight: 600; }
.side .sec {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: #64748b; padding: 1rem .6rem .3rem;
}
.side .foot { margin-top: 1.5rem; padding: .75rem .6rem; border-top: 1px solid #1e293b; font-size: .78rem; }

.main { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 4rem; }
.topbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.topbar h1 { margin: 0; flex: 1; }

/* ----------------------------------------------------------------- parts */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 1rem; }
.grid.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.g3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.g4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.stat b { display: block; font-size: 1.7rem; line-height: 1.1; }
.stat span { font-size: .8rem; color: var(--muted); }

.btn {
  display: inline-block; padding: .5rem .85rem; border-radius: 7px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  font-size: .88rem; font-weight: 600; cursor: pointer; text-align: center;
  font-family: inherit; line-height: 1.4;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--muted); filter: none; }
.btn.danger { background: var(--bad); border-color: var(--bad); }
.btn.sm { padding: .28rem .55rem; font-size: .78rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; color: #334155; }
label.inline { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
input[type=text], input[type=password], input[type=number], input[type=file],
input[type=color], input[type=email], select, textarea {
  width: 100%; padding: .48rem .6rem; border: 1px solid #cbd5e1;
  border-radius: 7px; font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
textarea { min-height: 72px; resize: vertical; }
.field { margin-bottom: .8rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 140px; }
.row > .fixed { flex: 0 0 auto; min-width: 0; }

table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { padding: .5rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; background: #f8fafc; position: sticky; top: 0; }
tbody tr:hover { background: #f8fafc; }
.scroll { overflow-x: auto; max-width: 100%; }

.tag {
  display: inline-block; padding: .12rem .45rem; border-radius: 20px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.tag.in_stock { background: #d1fae5; color: #065f46; }
.tag.order { background: #fef3c7; color: #92400e; }
.tag.discontinued { background: #fee2e2; color: #991b1b; }
.tag.create { background: #d1fae5; color: #065f46; }
.tag.update { background: #dbeafe; color: #1e40af; }
.tag.skip { background: #e2e8f0; color: #475569; }
.tag.grey { background: #e2e8f0; color: #475569; }

.flash { padding: .65rem .9rem; border-radius: 8px; margin-bottom: .8rem; font-size: .9rem; }
.flash.ok { background: #d1fae5; color: #065f46; }
.flash.error { background: #fee2e2; color: #991b1b; }

.note { background: #eff6ff; border-left: 3px solid var(--brand); padding: .6rem .8rem; border-radius: 0 8px 8px 0; font-size: .86rem; margin-bottom: .9rem; }
.note.warn { background: #fffbeb; border-color: var(--warn); }

.pager { display: flex; gap: .35rem; align-items: center; margin-top: .9rem; flex-wrap: wrap; }
.pager a, .pager span { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: .84rem; }
.pager .on { background: var(--brand); color: #fff; border-color: var(--brand); }

.steps { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; font-size: .82rem; }
.steps div { padding: .3rem .7rem; border-radius: 20px; background: #e2e8f0; color: var(--muted); }
.steps div.on { background: var(--brand); color: #fff; font-weight: 600; }
.steps div.done { background: #d1fae5; color: #065f46; }

.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #f8fafc; }

/* Category tile photo, set on the Categories screen. */
.catphoto { display: flex; align-items: center; gap: .4rem; }
.catphoto > span { display: grid; gap: .25rem; min-width: 0; }
.catphoto input[type=file] { font-size: .7rem; width: 100%; padding: .2rem; }
.thumb.noshot {
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); flex: 0 0 40px;
}

/* ------------------------------------------------------------ public site */
.pub-head { background: var(--brand); color: #fff; padding: .8rem 1rem; }
.pub-head .wrap { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pub-head a { color: #fff; }
.pub-head .name { font-weight: 700; font-size: 1.1rem; }
.pub-head .name span { display: block; font-size: .72rem; opacity: .85; font-weight: 400; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

.searchbar { padding: .7rem 0; position: sticky; top: 0; background: var(--bg); z-index: 20; border-bottom: 1px solid var(--line); }
.searchbar input[type=text] { font-size: 1rem; padding: .6rem .8rem; }

.chips { display: flex; gap: .35rem; overflow-x: auto; padding: .55rem 0; -webkit-overflow-scrolling: touch; }
.chips a {
  padding: .32rem .7rem; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  font-size: .82rem; white-space: nowrap; color: var(--ink);
}
.chips a.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.chips a:hover { text-decoration: none; }

.plist { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); padding: .8rem 0 6rem; }

/* Photo-first card: the image is the biggest thing on it, because that is
   what a retailer's eye lands on when scanning a long list. */
.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.pcard .shot {
  display: block; width: 100%; height: 168px; background: #f1f5f9;
  position: relative; flex: 0 0 168px; border-bottom: 1px solid var(--line);
}
.pcard .shot img { width: 100%; height: 100%; object-fit: contain; display: block; padding: .4rem; }
.pcard .shot .noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font-size: 2.1rem; font-weight: 700; letter-spacing: .05em;
}
.pcard .shot .badge { position: absolute; left: .45rem; top: .45rem; }
.pcard .body { flex: 1; min-width: 0; padding: .6rem .7rem .7rem; display: flex; flex-direction: column; }
.pcard .nm { font-weight: 600; font-size: .92rem; display: block; color: var(--ink); }
.pcard .meta { font-size: .76rem; color: var(--muted); margin: .15rem 0 .35rem; }
.pcard .price { font-size: .98rem; font-weight: 700; margin-top: auto; }
.pcard .mrp { font-size: .76rem; color: var(--muted); text-decoration: line-through; font-weight: 400; margin-left: .25rem; }
.pcard .margin { color: var(--ok); font-size: .76rem; font-weight: 700; margin-left: .25rem; }
.pcard label.pick {
  display: flex; align-items: center; gap: .35rem; font-size: .78rem;
  margin: .45rem -.7rem -.7rem; padding: .45rem .7rem; color: var(--muted);
  font-weight: 500; border-top: 1px solid var(--line); cursor: pointer;
}
.pcard label.pick:hover { background: #f8fafc; }
.pcard label.pick input { width: 16px; height: 16px; }

.crumbs { font-size: .82rem; color: var(--muted); padding: .5rem 0 0; }
.crumbs a { color: var(--muted); }
.crumbs b { color: var(--ink); }

.orderbar {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--ink); color: #fff;
  padding: .7rem 1rem; display: none; align-items: center; gap: .8rem; z-index: 50;
}
.orderbar.show { display: flex; }
.orderbar .wrap { display: flex; align-items: center; gap: .8rem; width: 100%; max-width: 1100px; }
.orderbar b { flex: 1; font-size: .9rem; }
.orderbar .btn { background: #22c55e; border-color: #22c55e; }

.pub-head .phones { display: flex; gap: .7rem; flex-wrap: wrap; font-size: .88rem; }
.pub-head .phones a { white-space: nowrap; }

/* Quantity sheet shown before the order goes to WhatsApp. */
.sheet-bg {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 100;
  display: none; align-items: flex-end; justify-content: center;
}
.sheet-bg.show { display: flex; }
.sheet {
  background: #fff; width: 100%; max-width: 520px; border-radius: 14px 14px 0 0;
  max-height: 88vh; display: flex; flex-direction: column;
}
.sheet header { padding: .9rem 1rem .6rem; border-bottom: 1px solid var(--line); }
.sheet header h2 { margin: 0; font-size: 1.05rem; }
.sheet header p { margin: .2rem 0 0; font-size: .82rem; color: var(--muted); }
.sheet .lines { overflow-y: auto; padding: .4rem 1rem; flex: 1; }
.qline {
  display: flex; align-items: center; gap: .6rem; padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}
.qline:last-child { border-bottom: 0; }
.qline .who { flex: 1; min-width: 0; }
.qline .who b { display: block; font-size: .88rem; font-weight: 600; }
.qline .who span { font-size: .74rem; color: var(--muted); }
.qline input {
  width: 74px; flex: 0 0 74px; text-align: center; font-size: 1rem;
  padding: .4rem .3rem;
}
.qline .unit { font-size: .74rem; color: var(--muted); flex: 0 0 auto; width: 30px; }
.sheet footer { padding: .8rem 1rem; border-top: 1px solid var(--line); display: grid; gap: .45rem; }

@media (min-width: 560px) {
  .sheet-bg { align-items: center; }
  .sheet { border-radius: 14px; }
}

.spec { width: 100%; font-size: .88rem; }
.spec td { padding: .4rem .3rem; border-bottom: 1px solid var(--line); }
.spec td:first-child { color: var(--muted); width: 42%; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }

@media (max-width: 800px) {
  .shell { flex-direction: column; }
  .side { width: 100%; flex: none; padding: .6rem; }
  .side nav { display: flex; flex-wrap: wrap; gap: .25rem; }
  .side nav a { font-size: .82rem; padding: .35rem .55rem; }
  .side .sec { display: none; }
  .side .foot { margin-top: .5rem; }
  .main { padding: 1rem .8rem 4rem; }
}

/* Two across on a phone keeps photos big while still showing several at once. */
@media (max-width: 560px) {
  .plist { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .pcard .shot, .pcard .shot { height: 132px; flex-basis: 132px; }
  .pcard .nm { font-size: .84rem; }
  .pcard .meta { font-size: .7rem; }
  .pcard .body { padding: .5rem .55rem .55rem; }
  .pcard label.pick { margin: .4rem -.55rem -.55rem; padding: .4rem .55rem; }
}

@media print {
  .side, .searchbar, .orderbar, .btn, .pager { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; }
}

/* ---------------------------------------------- theme picker (settings) */
.themepick {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.themecard {
  display: block; cursor: pointer; font-weight: 500;
  border: 2px solid var(--line); border-radius: 10px;
  padding: .55rem; background: #fff; text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.themecard:hover { border-color: var(--muted); }
.themecard.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.themecard input { position: absolute; opacity: 0; pointer-events: none; }
.themecard b { display: block; font-size: .9rem; margin-top: .4rem; }
.themecard .swatch {
  display: block; height: 62px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); position: relative; padding: 6px;
}
.themecard .swatch .bar { display: block; height: 14px; margin: -6px -6px 7px; }
.themecard .swatch .chip {
  display: inline-block; width: 26px; height: 7px; border-radius: 3px; margin-bottom: 5px;
}
.themecard .swatch .line {
  display: block; height: 6px; border-radius: 3px; background: #fff;
  border: 1px solid rgba(0,0,0,.07); margin-bottom: 4px;
}
.themecard .swatch .line.short { width: 60%; }

/* ------------------------------------- multi-category picker (fields page) */
.catpick { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.catpick-head {
  display: flex; align-items: center; gap: .35rem;
  padding: .3rem .45rem; border-bottom: 1px solid var(--line); background: #f8fafc;
}
.catpick-head span[data-count] { flex: 1; font-weight: 600; }
.catpick-list { max-height: 148px; overflow-y: auto; padding: .3rem .45rem; }
.catpick-list label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .84rem; font-weight: 500; margin-bottom: .12rem;
  padding-top: .12rem; padding-bottom: .12rem; cursor: pointer;
}
.catpick-list label:hover { background: #f1f5f9; border-radius: 4px; }
.catpick-list input { width: 15px; height: 15px; flex: 0 0 15px; }

/* ================================================= drafts / approval queue */

/* Count on the sidebar link, so work waiting is visible from any admin page. */
.navcount {
  display: inline-block; min-width: 20px; padding: 0 .35rem;
  border-radius: 10px; background: var(--bad); color: #fff;
  font-size: .7rem; font-weight: 700; text-align: center; line-height: 18px;
  margin-left: .25rem;
}

.draftlist { display: grid; gap: .5rem; }

.draft {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: .7rem; align-items: start;
  padding: .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: #fff;
}
/* Sent-back rows are the owner's own words coming back at them; amber marks
   them as somebody else's turn to act. */
.draft.back { border-left: 3px solid var(--warn); background: #fffdf7; }

.dshot {
  width: 72px; height: 72px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
}
.dshot img { width: 100%; height: 100%; object-fit: contain; }
.dshot .noshot { font-size: .66rem; color: var(--muted); text-align: center; }

.dbody { min-width: 0; }
.dname { font-weight: 700; font-size: 1rem; display: block; line-height: 1.25; }
.dmeta { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.dmeta b { color: var(--ink); }
.warnink { color: var(--bad) !important; }

.dnote {
  margin-top: .45rem; padding: .4rem .6rem; border-radius: 6px;
  background: #fffbeb; border: 1px solid #fde68a; font-size: .84rem;
}

.dact { display: grid; gap: .35rem; justify-items: stretch; min-width: 190px; }
.dact form { margin: 0; }
.dact .btn { width: 100%; }
.dact .sendback { display: flex; gap: .25rem; }
.dact .sendback input { font-size: .78rem; padding: .3rem .45rem; min-width: 0; }
.dact .sendback .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }

/* Only the owner gets a tick box, so the column only exists for them --
   staff never see a control they are not allowed to use. */
.draft.ticked { grid-template-columns: 22px 72px minmax(0, 1fr) auto; }
.dpick { margin: 0; padding-top: .2rem; }
.dpick input { width: 17px; height: 17px; }

.btn.ghost.on { border-color: var(--brand); color: var(--brand); font-weight: 700; }

/* Draft banner on the product edit screen. */
.reviewbar {
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  background: #fffbeb; border-radius: 0 8px 8px 0;
  padding: .7rem .9rem; margin-bottom: 1rem;
}
.reviewbar b { display: block; margin-bottom: .15rem; }
.reviewbar .note-back {
  margin-top: .45rem; padding-top: .45rem; border-top: 1px solid #fde68a;
  font-size: .88rem;
}

@media (max-width: 800px) {
  .draft { grid-template-columns: 56px minmax(0, 1fr); }
  .draft.ticked { grid-template-columns: 22px 56px minmax(0, 1fr); }
  .dshot { width: 56px; height: 56px; }
  .dact { grid-column: 1 / -1; min-width: 0; }
}

/* The drafts tile is a link, and turns amber when there is work waiting. */
a.stat { display: block; color: inherit; }
a.stat:hover { border-color: var(--muted); text-decoration: none; }
a.stat.urgent { border-color: var(--warn); background: #fffbeb; }
a.stat.urgent b { color: var(--warn); }

/* ------------------------------------------- brand circle + banner previews */
.brandlogo { display: flex; align-items: center; gap: .4rem; }
.brandlogo > span:last-child { display: grid; gap: .25rem; min-width: 0; }
.brandlogo input[type=file] { font-size: .68rem; width: 100%; padding: .15rem; }
.circlepv {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .02em;
}
.circlepv img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.schemepick { display: flex; gap: .3rem; flex-wrap: wrap; }
.schemecard { margin: 0; cursor: pointer; }
.schemecard input { position: absolute; opacity: 0; pointer-events: none; }
.schemecard span {
  display: block; padding: .4rem .7rem; border-radius: 6px;
  font-size: .78rem; font-weight: 700; border: 2px solid transparent;
}
.schemecard input:checked + span { border-color: var(--ink); }

.bnr-head { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
/* Mirrors what the strip actually does: the photo fills the whole banner,
   darkened from the left, with the words pinned into the first quarter of it.
   If this drifts from .offer in catalog.css the preview starts lying about
   what the customer will see. */
.bnr-prev {
  flex: 1; min-width: 220px; position: relative; display: block;
  border-radius: 8px; overflow: hidden; min-height: 84px;
}
.bnr-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bnr-prev .wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
              rgba(0, 0, 0, .88) 0%,
              rgba(0, 0, 0, .74) 38%,
              rgba(0, 0, 0, .32) 72%,
              rgba(0, 0, 0, .05) 100%);
}
.bnr-prev .wash + .words { color: #fff; }
.bnr-prev .words {
  position: relative; z-index: 2;
  width: 26%; min-width: 0; padding: .6rem .7rem;
}
.bnr-prev em { display: block; font-style: normal; font-weight: 800; font-size: .8rem; line-height: 1.15;
               overflow-wrap: anywhere; }
.bnr-prev i { display: block; font-style: normal; font-size: .66rem; opacity: .85; margin-top: .2rem;
              line-height: 1.2; overflow-wrap: anywhere; }
.bnr-red   { background: #C8102E; color: #fff; }
.bnr-black { background: #141414; color: #fff; }
.bnr-amber { background: #F2B705; color: #1A1A1A; }
.bnr-green { background: #15803D; color: #fff; }
.bnr-blue  { background: #12448C; color: #fff; }
.bnr-cream { background: #F3EDE1; color: #1A1A1A; }
.bnr-state { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------ keywords + AI description */
.labelrow { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.labelrow label { margin: 0; flex: 1; }

.aibtn { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.aispark { color: var(--brand); font-size: .95em; }
.aibtn:disabled { opacity: .6; }
.aihint {
  margin-top: .35rem; padding: .4rem .6rem; border-radius: 6px;
  background: #eff6ff; color: #1e40af; font-size: .82rem;
}
.aihint.bad { background: #fee2e2; color: #991b1b; }

/* Chips, so a long list of layman words stays readable while it is typed. */
.kwbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  min-height: 42px; padding: .3rem .4rem;
  border: 1px solid #cbd5e1; border-radius: 7px; background: #fff;
  cursor: text;
}
.kwbox:focus-within { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.kwbox input {
  flex: 1; min-width: 120px; width: auto;
  border: 0; padding: .2rem; outline: none;
}
.kwchip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .3rem .18rem .5rem;
  border-radius: 20px; background: #e2e8f0; color: var(--ink);
  font-size: .82rem; font-weight: 500;
}
.kwchip button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1;
  padding: 0 .2rem;
}
.kwchip button:hover { color: var(--bad); }

/* ------------------------------------------------- AI provider picker */
.aiprov { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.provcard {
  display: block; cursor: pointer; margin: 0;
  border: 2px solid var(--line); border-radius: 8px;
  padding: .6rem .7rem; background: #fff; font-weight: 500;
}
.provcard:hover { border-color: var(--muted); }
.provcard.on { border-color: var(--brand); background: #f8faff; }
.provcard input { position: absolute; opacity: 0; pointer-events: none; }
.provcard b { display: block; font-size: .95rem; margin-bottom: .15rem; }
.provcard span { display: block; line-height: 1.35; }
.provcard .mono { color: var(--brand); margin-top: .2rem; }

.aitest { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.aitest .small { flex: 1; min-width: 160px; }


/* ------------------------------------------- typeface picker (settings page)
   Each card renders its own sample in the pairing it offers, so the choice is
   made by looking rather than by reading font names. */
.fontpick {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.fontcard {
  display: block; cursor: pointer; position: relative;
  border: 2px solid var(--line); border-radius: 10px;
  padding: .7rem .75rem .6rem; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fontcard:hover { border-color: var(--muted); }
.fontcard.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.fontcard input { position: absolute; opacity: 0; pointer-events: none; }
.fontcard .fsample {
  display: block; border: 1px solid var(--line); border-radius: 6px;
  padding: .55rem .6rem; margin-bottom: .5rem; background: #fff;
}
.fontcard .fsample .fhead {
  display: block; font-weight: 700; font-size: 1.15rem; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.01em; color: #111;
}
.fontcard .fsample .fbody {
  display: block; font-size: .8rem; line-height: 1.35; color: #444; margin-top: .3rem;
}
.fontcard .fsample .fprice {
  display: block; font-weight: 700; font-size: .95rem; margin-top: .35rem; color: #111;
}
.fontcard > b { display: block; font-size: .92rem; }
.fontcard > .small { display: block; }