/* ─────────────────────────────────────────────────────────────
   SkinRx.help — one stylesheet, used by the public pages and the
   admin. Change it here and both follow.

   Palette and type follow SkinRevu:
     cream #F5EFE8 · coral #D94F2E · teal #5B8FA8 · gold #C9A84C
     Playfair Display for headings, DM Sans for everything else.
   ───────────────────────────────────────────────────────────── */

:root{
  --cream:#F5EFE8; --paper:#FFFCF8; --coral:#D94F2E; --teal:#5B8FA8; --gold:#C9A84C;
  --ink:#2B2622; --ink60:#6E655D; --rule:#E2D9CE;
  --green:#2F6B45; --red:#A33A20;
  --display:"Playfair Display",Georgia,serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(1rem,4vw,2.5rem);
}

*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.7 var(--body)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(1.75rem,3.6vw,2.5rem)}
h2{font-size:clamp(1.2rem,2.2vw,1.45rem)}
h3{font-size:1.05rem}
.lede{font-size:1.05rem;color:var(--ink60)}
p{margin:0}
a{color:var(--teal)}
a:hover{color:var(--coral)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.wrap{max-width:940px;margin:0 auto;padding-inline:var(--gutter)}

/* ── masthead, shared shape ─────────────────────────────────── */
.top,.mast{background:var(--paper);border-bottom:1px solid var(--rule)}
.top__in,.mast__in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:.85rem;flex-wrap:wrap}
.mast__in{padding-inline:var(--gutter);max-width:940px;margin:0 auto}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.brand img{height:52px;width:auto;display:block}
.brand .div,.brand>span:not(.wm):not([class]){width:1px;height:32px;background:var(--rule)}
.brand b{font-family:var(--display);font-size:1.05rem;font-weight:600;display:block;line-height:1.1}
.brand b i{font-style:normal;color:var(--coral)}
.brand em{font-style:normal;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink60)}
.brand .wm{display:flex;align-items:center}
.top__note{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink60)}
.topnav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.topnav a{font-size:.85rem;text-decoration:none;color:var(--ink60)}
.topnav a:hover{color:var(--coral)}
@media(max-width:520px){.topnav .top__note{display:none}.brand img{height:38px}
  .brand .wm,.brand .div{display:none}}

/* the small teal dot from the mockup */
.readonly{display:inline-flex;align-items:center;gap:.45rem;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.readonly::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--teal)}

/* ── hero ───────────────────────────────────────────────────── */
.hero{text-align:center;max-width:44rem;margin:clamp(2.2rem,6vw,3.6rem) auto 0}
.hero h1{margin:.7rem 0 .8rem;text-wrap:balance}
.hero .lede{margin:0 auto;max-width:36rem}
.hero .search{margin:1.8rem auto 0;max-width:34rem}
@media(max-width:560px){.hero{text-align:left}.hero .lede{margin-left:0}}

/* ── type helpers ───────────────────────────────────────────── */
.label{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink60);
  font-weight:500;display:block}
.section{margin-top:clamp(2.4rem,5vw,3.4rem)}
.section > .label{margin-bottom:.3rem}
.section h2{margin-bottom:.35rem}
.section p.muted{margin-bottom:.9rem}
.muted{color:var(--ink60);font-size:.85rem}
.warn{color:var(--red);font-size:.9rem}
.ok{color:var(--green);font-size:.9rem}
.crumb{font-size:.8rem;color:var(--ink60);margin:1.4rem 0 .8rem}
.crumb a{text-decoration:none}

/* ── surfaces ───────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:1.4rem}
.card + .card{margin-top:1rem}
.grid .card + .card,.grid--pair .card + .card{margin-top:0}
.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:stretch}
.grid > *{min-width:0}
/* two cards of equal height, side by side until there is no room */
.grid--pair{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.src,.note{margin-top:1.2rem;padding-top:.9rem;border-top:1px dashed var(--rule);
  font-size:.78rem;color:var(--ink60)}
.locked{background:rgba(91,143,168,.1);border-left:3px solid var(--teal);
  padding:.85rem 1rem;font-size:.85rem;color:var(--ink60);border-radius:0 4px 4px 0;margin-bottom:1.2rem}

/* ── result rows ────────────────────────────────────────────── */
.hit{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;
  padding:.85rem 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.hit a{font-weight:500;text-decoration:none;color:var(--ink)}
.hit a:hover{color:var(--coral)}
.hit small{color:var(--ink60);font-size:.8rem;display:block;font-weight:400}
.row{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;
  padding:.8rem 0;border-bottom:1px solid var(--rule)}
.row .nm{flex:1 1 240px;min-width:0;font-weight:500;word-break:break-word}
.row .n,.n{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink60);white-space:nowrap}

/* ── chips ──────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{font-size:.73rem;padding:.18rem .55rem;border-radius:3px;
  background:rgba(91,143,168,.15);color:#3E6A80;white-space:nowrap}
.chip.gold{background:rgba(201,168,76,.2);color:#836A1D}
.chip.coral{background:rgba(217,79,46,.13);color:var(--red)}
.chip.teal{background:rgba(91,143,168,.15);color:#3E6A80}

/* Selected. The plain chip is already teal, so "teal" could never read as
   chosen — this is the state used by every tab, filter and letter. */
.chip.on{background:var(--ink);color:var(--cream)}
a.chip{text-decoration:none;transition:background .12s ease}
a.chip:hover{background:rgba(43,38,34,.12);color:var(--ink)}
a.chip.on:hover{background:var(--ink);color:var(--cream)}

/* ── definition lists ───────────────────────────────────────── */
.dl{display:grid;grid-template-columns:9.5rem 1fr;gap:.55rem 1rem;font-size:.9rem;margin-top:1.2rem}
.dl dt{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink60);padding-top:.25rem}
.dl dd{margin:0}
@media(max-width:520px){.dl{grid-template-columns:1fr;gap:.15rem .5rem}.dl dt{padding-top:.7rem}}

/* ── the ingredient ladder ──────────────────────────────────── */
.ladder{margin-top:1rem}
.lrow{display:grid;grid-template-columns:2.1rem 1fr auto;gap:.8rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.9rem}
.lrow .pos{font-size:.75rem;color:var(--ink60)}
.lrow .fn{font-size:.75rem;color:var(--ink60);display:block}
.lrow a{text-decoration:none;color:var(--ink)}
.lrow a:hover{color:var(--coral)}
.lrow.unres{color:var(--ink60)}
.cut{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;color:var(--ink60)}
.cut i{flex:1;height:0;border-top:1px dashed var(--rule)}
.cut span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}

/* ── forms and buttons ──────────────────────────────────────── */
.search{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.6rem 0}
.search input{flex:1;min-width:200px;font:400 1rem var(--body);color:var(--ink);
  padding:.8rem 1rem;border:1px solid var(--rule);border-radius:4px;background:var(--paper)}
.search button{font:700 .875rem var(--body);padding:.8rem 1.5rem;border-radius:4px;
  border:1px solid var(--coral);background:var(--coral);color:#fff;cursor:pointer}
.search button:hover{background:#C24526}

input,select,textarea{font:400 .92rem var(--body);color:var(--ink);background:var(--cream);
  border:1px solid var(--rule);border-radius:3px;padding:.55rem .7rem}
textarea{min-height:4.5rem;resize:vertical}
.f{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink60);margin:.9rem 0 .3rem}

.btn{font:700 .85rem var(--body);padding:.6rem 1.2rem;border-radius:4px;
  border:1px solid var(--coral);background:var(--coral);color:#fff;cursor:pointer;width:auto}
.btn:hover{background:#C24526;color:#fff}
.btn.t{background:var(--teal);border-color:var(--teal)}
.btn.t:hover{background:#4E7E96}
.btn.q{background:transparent;color:var(--ink60);border-color:var(--rule)}
.btn.q:hover{background:rgba(91,143,168,.1);color:var(--ink)}

/* ── decoder ────────────────────────────────────────────────── */
.decoder{padding:clamp(1.4rem,3vw,2rem)}
.decoder h2{margin:.4rem 0 .6rem}
.decoder p{font-size:.95rem}
.decoder textarea{width:100%;min-height:9.5rem;font-family:var(--mono);
  font-size:.92rem;line-height:1.75;padding:1rem 1.1rem;border-radius:4px;margin-top:1rem}
.decoder textarea::placeholder{color:#A79C90}
.decoder .go{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;margin-top:.9rem}
.decoder button{font:700 .95rem var(--body);padding:.85rem 1.8rem;border-radius:4px;
  border:1px solid var(--coral);background:var(--coral);color:#fff;cursor:pointer}
.decoder button:hover{background:#C24526}

/* ── worked-example cards ───────────────────────────────────── */
.ex{display:flex;flex-direction:column;height:100%}
.ex__name{font-family:var(--display);font-size:1.45rem;line-height:1.2;margin:.35rem 0 .1rem}
.ex__name a{text-decoration:none;color:var(--ink)}
.ex__name a:hover{color:var(--coral)}
.ex__meta{font-size:.84rem;color:var(--ink60);margin-bottom:.2rem}
.ex .dl{grid-template-columns:7.5rem 1fr;font-size:.86rem;margin-top:1.1rem}
.ex .ladder{margin-top:.5rem}
.ex .lrow{font-size:.86rem;grid-template-columns:1.9rem 1fr auto;padding:.42rem 0}
.ex .src{margin-top:auto;padding-top:1rem}
.ex .fn.gold{color:#836A1D}
.ex .fn.red{color:var(--red)}
@media(max-width:760px){.ex .dl{grid-template-columns:1fr}}

/* ── the pick-your-products panel, collapsed once results exist ── */
.pickform{margin-top:1.2rem}
.pickform > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  font:700 .85rem var(--body);padding:.6rem 1.2rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--paper);color:var(--ink60)}
.pickform > summary::-webkit-details-marker{display:none}
.pickform > summary::after{content:"▾";font-size:.8em}
.pickform[open] > summary::after{content:"▴"}
.pickform > summary:hover{border-color:var(--teal);color:var(--ink)}
.pickform[open] > summary{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ── why a search result matched ────────────────────────────── */
.via{color:var(--ink60)}
.via span{color:var(--teal);font-weight:500}

/* ── the latest change, under the hero ──────────────────────── */
.newsline{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .5rem;
  margin:1.4rem auto 0;max-width:46rem;font-size:.86rem;color:var(--ink60);
  padding:.55rem .9rem .5rem;background:var(--paper);border:1px solid var(--rule);border-radius:4px}
.newsline__tag{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--cream);background:var(--teal);padding:.16rem .45rem;border-radius:3px}
.newsline__date{color:var(--ink);font-weight:600;white-space:nowrap}
/* The note takes the rest of the first line and the link drops to its own.
   A long note is cut off after two lines with an ellipsis, so however much is
   written the box stays the same height. */
.newsline__body{flex:1 1 12rem;min-width:0;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden}
.newsline a{flex:0 0 100%;font-size:.78rem;margin-top:.1rem}
@media(max-width:560px){.newsline{font-size:.82rem}.newsline__body{flex-basis:100%}}

/* ── the routine card ───────────────────────────────────────── */
.promo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center;
  background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--teal);
  border-radius:5px;padding:1.5rem 1.6rem}
.promo h2{margin-bottom:.4rem}
.promo p{color:var(--ink60);max-width:44rem}
.promo .btn{margin-top:1rem}
.promo__steps{display:grid;gap:.42rem;width:118px}
.promo__steps i{display:block;height:.5rem;border-radius:3px;background:rgba(91,143,168,.32)}
.promo__steps i:nth-child(1){width:100%}
.promo__steps i:nth-child(2){width:78%}
.promo__steps i:nth-child(3){width:92%;background:var(--teal)}
.promo__steps i:nth-child(4){width:64%}
.promo__steps span{display:block;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink60);margin-top:.35rem}
@media(max-width:620px){
  .promo{grid-template-columns:1fr;gap:1rem;padding:1.3rem}
  .promo__steps{width:96px}
}

/* a quieter version, for the foot of other pages */
.promo--slim{padding:1rem 1.2rem;gap:1.1rem;margin-top:1.2rem}
.promo--slim h3{font-size:1rem;margin-bottom:.2rem}
.promo--slim p{font-size:.88rem}
.promo--slim .promo__steps{width:74px}
.promo--slim .btn{margin-top:.7rem}

/* ── home page furniture ────────────────────────────────────── */
.tiles{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-top:.6rem}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:4px;
  padding:.75rem .9rem;text-decoration:none;color:var(--ink);display:block}
.tile:hover{border-color:var(--teal);color:var(--ink)}
.tile b{display:block;font-weight:500;font-size:.9rem;line-height:1.3}
.tile small{color:var(--ink60);font-size:.75rem}
.sources{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:clamp(2.4rem,5vw,3.4rem);text-align:left}
.source{background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:1.2rem 1.3rem}
.source b{display:block;font-family:var(--display);font-size:1.9rem;line-height:1;margin-bottom:.35rem}
.source strong{display:block;font-size:.82rem;font-weight:700;margin-bottom:.3rem}
.source p{font-size:.85rem;color:var(--ink60);line-height:1.55}
.source--ref b{color:var(--teal)}
.source--cat b{color:var(--coral)}

/* ── admin ──────────────────────────────────────────────────── */
.nav{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.2rem 0 1.4rem;
  position:sticky;top:0;z-index:5;background:var(--cream);padding-block:.6rem}
.nav a{text-decoration:none;font-size:.85rem;font-weight:500;padding:.5rem 1rem;border-radius:4px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink60)}
.nav a:hover{border-color:var(--teal);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.figs{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fig{background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:1rem}
.fig b{display:block;font:600 1.6rem/1.1 var(--display)}
.fig span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink60)}

.step__n{display:inline-block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink60);margin-bottom:.4rem;font-weight:500}

form.inline{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:0;width:auto}
form.inline select{width:auto;max-width:260px}
.lk{padding:.3rem .7rem;font-size:.72rem;text-decoration:none;display:inline-block;
  vertical-align:middle;margin-right:.35rem}
.pick{user-select:all;cursor:text}

.qitem{background:var(--paper);border:1px solid var(--rule);border-radius:5px;
  padding:.9rem 1.1rem;margin-bottom:.7rem}
.qitem__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.7rem}
.qitem .tok{font-family:var(--mono);font-size:.88rem;word-break:break-word}
.qitem__form{display:grid;gap:.6rem}
.qitem__fields{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.qitem__fields select,.qitem__fields input{width:100%;min-width:0}
.qitem__acts{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.qitem__acts .btn{padding:.45rem .9rem;font-size:.78rem}
@media(max-width:640px){.qitem__fields{grid-template-columns:1fr}}

/* admin forms want full-width fields inside cards */
.card .f + input,.card .f + select,.card .f + textarea{width:100%}
.card small.muted{display:block;margin-top:.3rem;font-size:.78rem;line-height:1.5}

/* ── simple bar rows, used on the admin insights tab ────────── */
.brow{display:grid;grid-template-columns:9rem 1fr 3rem;gap:.7rem;align-items:center;
  padding:.32rem 0;font-size:.85rem}
.brow .blabel{color:var(--ink60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .btrack{background:rgba(91,143,168,.14);border-radius:3px;height:.62rem;overflow:hidden}
.brow .btrack i{display:block;height:100%;background:var(--teal);border-radius:3px}
.brow .bval{text-align:right;color:var(--ink60);font-variant-numeric:tabular-nums}
@media(max-width:520px){.brow{grid-template-columns:6.5rem 1fr 2.4rem}}

/* ── pronunciation, and the copy button ─────────────────────── */
.say{font-style:italic;color:var(--teal)}
.copybtn{cursor:pointer}
.copyhint{display:inline-block}
@media(max-width:560px){.copyhint{display:block;margin:.4rem 0 0}}

/* ── report link ────────────────────────────────────────────── */
.report-link{display:inline-block;margin-top:.5rem;font-size:.78rem;text-decoration:none;
  border-bottom:1px solid var(--rule)}
.report-link:hover{border-color:var(--coral)}

/* ── count rows on the admin data tab ───────────────────────── */
.crow{display:grid;grid-template-columns:13rem 6rem 1fr;gap:.9rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.88rem}
.crow__name code{font-size:.82rem;background:var(--cream);padding:.12rem .4rem;border-radius:3px}
.crow__n{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.crow__note{color:var(--ink60);font-size:.8rem;line-height:1.5}
@media(max-width:640px){
  .crow{grid-template-columns:1fr auto;gap:.2rem .8rem}
  .crow__note{grid-column:1 / -1}
}

/* ── worklist suggestions and bulk save ─────────────────────── */
.sugg{background:var(--cream);border-radius:4px;padding:.8rem .9rem;margin:.9rem 0 .2rem}
.sugg .btn{margin:.35rem .35rem 0 0;font-size:.78rem;padding:.35rem .8rem;text-align:left}
.sugg .btn em{font-style:normal;color:var(--ink60);font-weight:400}
.sugg p.muted{margin-top:.6rem;font-size:.76rem}
.savebar{position:sticky;bottom:0;background:var(--cream);border-top:1px solid var(--rule);
  padding:.9rem 0;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;z-index:4}

/* ── footer ─────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);margin-top:3.5rem;padding-block:2rem;
  font-size:.75rem;color:var(--ink60)}
footer p + p{margin-top:.5rem}