/* ============================================================
   price_target.components.css · "แจ้งเตือนเมื่อราคาถึงเป้า"
   (price-target alert) · ENH — brief E.
   EXTENDS the shipped Atlas language (supply.tokens.css +
   supply.components.css + shell.chrome.css + noti.components.css)
   and REUSES the shipped .linelink card (line_link.components.css)
   verbatim for the LINE-not-linked state — no second linking flow
   is minted.
   ------------------------------------------------------------
   Placement: a section INSIDE prefsBody / `.prefwrap`, above the
   channel grid — the same host the LINE-connect row lives in.
   Zero new colour / font / radius / shadow: every value is a token.
   Provenance grammar is reused whole: ◆ = official (the watched
   source), ~ = the always-banded reference figure.
   ============================================================ */

/* the section shell — same material as .quiet / .linelink */
.ptsec{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:var(--s4) var(--s5); display:flex; flex-direction:column;
  gap:var(--s4); container-type:inline-size; }
.ptsec .pt-hd{ display:flex; align-items:flex-start; gap:var(--s3); }
.ptsec .pt-hd .pt-ic{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:grid;
  place-items:center; background:var(--brand-soft); color:var(--brand-ink); }
.ptsec .pt-hd .pt-ic svg{ width:22px; height:22px; }
.ptsec .pt-hd .pt-htx{ min-width:0; flex:1; display:flex; flex-direction:column; gap:.15rem; }
.ptsec .pt-hd .pt-ttl{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); line-height:1.3; }
.ptsec .pt-hd .pt-sub{ font-size:var(--fs-xs); color:var(--muted); line-height:1.45; }
.ptsec .pt-count{ flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  color:var(--muted); background:var(--surface2); border:1px solid var(--line2); border-radius:var(--r-pill);
  padding:.18rem .55rem; white-space:nowrap; }

/* the always-on honesty line: source named + reference-not-farmgate + real cadence */
.pt-honest{ display:flex; gap:.5rem; align-items:flex-start; font-size:var(--fs-2xs); color:var(--ink2);
  line-height:1.5; background:var(--pv-official-bg); border:1px solid var(--pv-official-ln);
  border-radius:var(--r); padding:.55rem .7rem; }
.pt-honest .g{ flex:0 0 auto; color:var(--pv-official); font-weight:var(--fw-x); }
.pt-honest b{ color:var(--ink); }

/* ============================================================
   TARGET LIST — up to 3 rows, each shows distance from today
   ============================================================ */
.pt-list{ display:flex; flex-direction:column; gap:var(--s3); }
.pt-target{ border:1px solid var(--line2); border-radius:var(--r); background:var(--surface2);
  padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.pt-target.reached{ background:var(--pv-verified-bg); border-color:var(--pv-verified-ln); }
.pt-target.noprice{ background:var(--pv-stale-bg); border-color:var(--pv-stale-ln); }

.pt-t-top{ display:flex; align-items:flex-start; gap:var(--s2); }
.pt-t-id{ min-width:0; flex:1; display:flex; flex-direction:column; gap:.15rem; }
.pt-t-title{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); }
.pt-t-title .var{ font-weight:var(--fw-bold); }
.pt-t-title .grade{ color:var(--ink2); font-weight:var(--fw-semi); }
.pt-t-src{ display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-2xs); color:var(--muted); }
.pt-t-src .g{ color:var(--pv-official); font-weight:var(--fw-x); }
.pt-t-src .dt{ font-family:var(--mono); }
.pt-t-del{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line2);
  background:var(--surface); color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.pt-t-del svg{ width:15px; height:15px; }
.pt-t-del:hover{ background:var(--bad-bg); border-color:color-mix(in srgb,var(--bad) 35%,transparent); color:var(--bad); }

/* status pill (armed / reached / no-price) */
.pt-status{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs);
  font-weight:var(--fw-bold); padding:.16rem .5rem; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; }
.pt-status .ic{ width:12px; height:12px; display:inline-flex; }
.pt-status .ic svg{ width:100%; height:100%; }
.pt-target.armed   .pt-status{ background:var(--brand-soft); color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 30%,transparent); }
.pt-target.reached .pt-status{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.pt-target.noprice .pt-status{ background:var(--pv-stale-bg); color:var(--pv-stale); border-color:var(--pv-stale-ln); border-style:dashed; }

/* --- the DISTANCE GAUGE — the signature instrument.
   A horizontal track: today's reference band → the target notch.
   Up-only: the target always sits to the RIGHT (higher). The gap
   is labelled +N ฿; the fill shows how far today has climbed.
   Greyscale-safe: markers are shape+label, not colour alone. */
.pt-gauge{ display:flex; flex-direction:column; gap:.4rem; }
.pt-gauge-scale{ position:relative; height:34px; }
.pt-gauge-track{ position:absolute; left:0; right:0; top:14px; height:6px; border-radius:var(--r-pill);
  background:var(--line2); overflow:hidden; }
.pt-gauge-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--ramp-2),var(--ramp-3)); }
.pt-target.reached .pt-gauge-fill{ background:var(--pv-verified); }
/* today marker (◆ official reference — a solid dot with a mono label above) */
.pt-mk{ position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:2px; white-space:nowrap; }
.pt-mk .dot{ width:13px; height:13px; border-radius:50%; border:2px solid var(--surface); }
.pt-mk.now .dot{ background:var(--pv-official); box-shadow:0 0 0 1px var(--pv-official); }
.pt-mk .lab{ font-family:var(--mono); font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--ink); }
.pt-mk .cap{ font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
/* target notch (brass flag, sits at the right) */
.pt-mk.tgt{ align-items:center; }
.pt-mk.tgt .flag{ width:2px; height:20px; background:var(--brand); position:relative; }
.pt-mk.tgt .flag::before{ content:""; position:absolute; top:0; left:0; border-left:9px solid var(--brand);
  border-top:5px solid transparent; border-bottom:5px solid transparent; }
.pt-mk.tgt .lab{ color:var(--brand-ink); }
/* the gap read-out under the gauge */
.pt-gap{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  font-size:var(--fs-2xs); color:var(--muted); }
.pt-gap .dist{ font-family:var(--mono); font-weight:var(--fw-bold); color:var(--brand-ink); }
.pt-gap .dist .up{ font-weight:var(--fw-x); }
.pt-target.reached .pt-gap .dist{ color:var(--pv-verified); }

/* target-row footer: channel + the standing frequency truth + rest countdown */
.pt-t-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding-top:var(--s2);
  border-top:1px dashed var(--line2); font-size:var(--fs-2xs); color:var(--muted); }
.pt-chan{ display:inline-flex; align-items:center; gap:.3rem; font-weight:var(--fw-semi); color:var(--ink2);
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-pill); padding:.14rem .5rem; }
.pt-chan .ll-glyph{ width:13px; height:13px; color:#06c755; display:inline-flex; }
.pt-chan .ll-glyph svg{ width:100%; height:100%; }
.pt-chan.warn{ background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 34%,transparent); color:var(--warn); }
.pt-freqline{ display:inline-flex; align-items:center; gap:.3rem; }
.pt-freqline .dotmark{ opacity:.5; }
.pt-rest{ display:inline-flex; align-items:center; gap:.3rem; color:var(--pv-verified); font-weight:var(--fw-semi); }
.pt-rest .n{ font-family:var(--mono); }

/* add-target CTA + the "3 of 3" ceiling note */
.pt-add{ display:flex; flex-direction:column; gap:.4rem; }
.pt-add .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
.pt-add .btn .ic{ width:17px; height:17px; }
.pt-add .btn .ic svg{ width:100%; height:100%; }
.pt-ceil{ font-size:var(--fs-2xs); color:var(--muted); text-align:center; line-height:1.4; }
.pt-ceil b{ color:var(--ink2); }

/* ============================================================
   SET-A-TARGET FORM — one screen, no wizard (CANON 5)
   ============================================================ */
.pt-form{ display:flex; flex-direction:column; gap:var(--s4); }
.pt-field{ display:flex; flex-direction:column; gap:.4rem; }
.pt-lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:var(--fw-bold); }

/* segmented pickers (variety / grade / channel) — reuse the shipped seg look */
.pt-seg{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.pt-seg button{ font:inherit; cursor:pointer; border:1px solid var(--line2); background:var(--surface);
  color:var(--ink2); border-radius:var(--r-pill); padding:.42rem .85rem; font-size:var(--fs-sm);
  font-weight:var(--fw-semi); display:inline-flex; align-items:center; gap:.35rem; min-height:38px; }
.pt-seg button:hover{ border-color:var(--muted); }
.pt-seg button[aria-pressed="true"]{ background:var(--brand-fill); border-color:var(--brand); color:var(--brand-fill-ink); }
.pt-seg button .ll-glyph{ width:15px; height:15px; display:inline-flex; }
.pt-seg button .ll-glyph svg{ width:100%; height:100%; }
.pt-seg button[aria-pressed="true"] .ll-glyph{ color:#fff; }
.pt-seg button .chsub{ font-size:var(--fs-2xs); font-weight:var(--fw-med); opacity:.8; }

/* the WATCHED-SOURCE card — names dit_price = กรมการค้าภายใน, ◆,
   shows today's band, and carries the reference + cadence honesty. */
.pt-srccard{ border:1px solid var(--pv-official-ln); border-radius:var(--r); background:var(--pv-official-bg);
  padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:.5rem; }
.pt-src-top{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pt-src-name{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); display:inline-flex; align-items:center; gap:.35rem; }
.pt-src-name .g{ color:var(--pv-official); font-weight:var(--fw-x); }
.pt-src-band{ margin-left:auto; display:flex; align-items:baseline; gap:.3rem; }
.pt-src-band .band{ font-size:var(--fs-lg); font-weight:var(--fw-bold); line-height:1; }
.pt-src-band .band .tilde{ color:var(--pv-est); }
.pt-src-band .unit{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); }
.pt-src-meta{ font-size:var(--fs-2xs); color:var(--muted); display:flex; flex-wrap:wrap; gap:.15rem .5rem; }
.pt-src-meta .dt{ font-family:var(--mono); }
.pt-src-ref{ font-size:var(--fs-2xs); color:var(--ink2); line-height:1.5; border-top:1px dashed var(--pv-official-ln); padding-top:.45rem; }
.pt-src-ref b{ color:var(--ink); }

/* the up-only direction badge (v1: notify only when price CLIMBS) */
.pt-updir{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; font-size:var(--fs-xs);
  font-weight:var(--fw-semi); color:var(--brand-ink); background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 28%,transparent); border-radius:var(--r-pill); padding:.24rem .6rem; }
.pt-updir .ic{ width:14px; height:14px; display:inline-flex; }
.pt-updir .ic svg{ width:100%; height:100%; }

/* the big, thumb-friendly number entry */
.pt-numwrap{ display:flex; align-items:stretch; border:1.5px solid var(--line2); border-radius:var(--r);
  background:var(--surface); overflow:hidden; }
.pt-numwrap:focus-within{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent); }
.pt-step{ flex:0 0 52px; border:0; background:var(--surface2); color:var(--brand-ink); font-size:1.6rem;
  font-weight:var(--fw-bold); cursor:pointer; line-height:1; }
.pt-step:hover{ background:var(--brand-soft); }
.pt-step:disabled{ opacity:.4; cursor:not-allowed; }
.pt-numcore{ flex:1; min-width:0; display:flex; align-items:baseline; justify-content:center; gap:.3rem; padding:.5rem .4rem; }
.pt-numcore .cur{ font-family:var(--mono); font-size:var(--fs-lg); color:var(--muted); font-weight:var(--fw-bold); }
.pt-num{ width:3.6ch; border:0; background:transparent; text-align:center; font-family:var(--mono);
  font-variant-numeric:tabular-nums; font-size:2.4rem; font-weight:var(--fw-x); color:var(--ink);
  line-height:1.05; letter-spacing:-.01em; }
.pt-num:focus{ outline:none; }
.pt-numcore .unit{ font-size:var(--fs-sm); color:var(--muted); font-weight:var(--fw-semi); }

/* quick-set chips (always above today's high — up-only) */
.pt-quick{ display:flex; flex-wrap:wrap; gap:6px; }
.pt-quick button{ font:inherit; cursor:pointer; border:1px dashed var(--line2); background:var(--surface2);
  color:var(--brand-ink); border-radius:var(--r-pill); padding:.3rem .7rem; font-family:var(--mono);
  font-size:var(--fs-xs); font-weight:var(--fw-bold); min-height:34px; }
.pt-quick button:hover{ border-style:solid; border-color:var(--brand); background:var(--brand-soft); }

/* inline validation hint (target must be higher than today) */
.pt-hint{ display:flex; gap:.4rem; align-items:flex-start; font-size:var(--fs-2xs); line-height:1.45; }
.pt-hint.warn{ color:var(--warn); }
.pt-hint.calm{ color:var(--muted); }
.pt-hint .ic{ flex:0 0 14px; width:14px; height:14px; margin-top:.05rem; }
.pt-hint .ic svg{ width:100%; height:100%; }

/* the frequency contract, stated AT set time (settled decision 3) */
.pt-freq{ display:flex; gap:.55rem; align-items:flex-start; font-size:var(--fs-xs); color:var(--ink2);
  line-height:1.5; background:var(--surface2); border:1px solid var(--line2); border-radius:var(--r); padding:.6rem .75rem; }
.pt-freq .ic{ flex:0 0 17px; width:17px; height:17px; color:var(--brand2); margin-top:.05rem; }
.pt-freq .ic svg{ width:100%; height:100%; }
.pt-freq b{ color:var(--ink); }

/* channel-aware save footer */
.pt-actions{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.pt-actions .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
.pt-actions .btn.full,.pt-actions .btn.grow{ flex:1 1 auto; min-width:170px; }
.pt-actions .btn .ll-lico{ width:19px; height:19px; display:inline-flex; }
.pt-actions .btn .ll-lico svg{ width:100%; height:100%; }

/* ============================================================
   SAVED confirmation — HONEST per channel (FLAG#4).
   In-app channel → a true success. LINE channel not linked →
   NO "saved" success; an amber "armed but not delivering yet"
   banner that hands to the shipped .linelink card below it.
   ============================================================ */
.pt-saved{ display:flex; gap:.6rem; align-items:flex-start; border-radius:var(--r); padding:.7rem .85rem; line-height:1.5; }
.pt-saved .ic{ flex:0 0 20px; width:20px; height:20px; margin-top:.05rem; }
.pt-saved .ic svg{ width:100%; height:100%; }
.pt-saved .tx{ min-width:0; }
.pt-saved .tx b{ display:block; margin-bottom:.1rem; }
.pt-saved.ok{ background:var(--pv-verified-bg); border:1px solid var(--pv-verified-ln); color:var(--ink2); }
.pt-saved.ok .ic{ color:var(--pv-verified); }
.pt-saved.ok b{ color:var(--pv-verified); }
.pt-saved.pending{ background:var(--warn-bg); border:1px solid color-mix(in srgb,var(--warn) 34%,transparent); color:var(--ink2); }
.pt-saved.pending .ic{ color:var(--warn); }
.pt-saved.pending b{ color:var(--warn); }

/* ============================================================
   NO-PRICE-TODAY — a real, honest state (the feed has gaps)
   ============================================================ */
.pt-noprice{ display:flex; flex-direction:column; gap:.5rem; border:1px dashed var(--pv-stale-ln);
  border-radius:var(--r); background:var(--pv-stale-bg); padding:var(--s4); }
.pt-noprice .np-top{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); }
.pt-noprice .np-top .g{ color:var(--pv-stale); font-weight:var(--fw-x); }
.pt-noprice .np-body{ font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.pt-noprice .np-last{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); }
.pt-noprice .np-last b{ color:var(--ink2); }

/* ============================================================
   EMPTY — no targets yet
   ============================================================ */
.pt-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s2);
  padding:var(--s5) var(--s4); }
.pt-empty .em-ic{ width:46px; height:46px; color:var(--brand); background:var(--brand-soft);
  border-radius:50%; display:grid; place-items:center; }
.pt-empty .em-ic svg{ width:24px; height:24px; }
.pt-empty h3{ margin:.2rem 0 0; font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); }
.pt-empty p{ margin:0; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; max-width:38ch; }
.pt-empty .btn{ margin-top:var(--s2); display:inline-flex; align-items:center; gap:.45rem; }
.pt-empty .btn .ic{ width:17px; height:17px; }
.pt-empty .btn .ic svg{ width:100%; height:100%; }

/* ============================================================
   PUBLIC-DOOR entry — the CTA is a DOOR, not a wall (decision 5)
   ============================================================ */
.pt-door{ border:1px solid var(--brand); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--brand-soft),var(--surface)); box-shadow:var(--sh-sm);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.pt-door .door-eyebrow{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.09em;
  color:var(--brand-ink); font-weight:var(--fw-bold); }
.pt-door h2{ margin:0; font-size:var(--fs-xl); font-weight:var(--fw-x); letter-spacing:-.015em; color:var(--ink); line-height:1.15; }
.pt-door .door-sub{ font-size:var(--fs-sm); color:var(--ink2); line-height:1.55; max-width:46ch; }
.pt-door .pt-srccard{ background:var(--surface); }
.pt-door .door-steps{ display:flex; flex-direction:column; gap:.4rem; }
.pt-door .door-step{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-xs); color:var(--ink2); }
.pt-door .door-step .n{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--brand-fill);
  color:var(--brand-fill-ink); font-family:var(--mono); font-size:var(--fs-2xs); font-weight:var(--fw-bold); display:grid; place-items:center; }
.pt-door .door-acts{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.pt-door .door-acts .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
.pt-door .door-acts .btn.grow{ flex:1 1 auto; min-width:180px; }
.pt-door .door-acts .btn .ll-lico{ width:19px; height:19px; display:inline-flex; }
.pt-door .door-acts .btn .ll-lico svg{ width:100%; height:100%; }
.pt-door .door-free{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.5; }
.pt-door .door-free b{ color:var(--ink2); }

/* ============================================================
   LOADING — skeleton rows
   ============================================================ */
.pt-skel{ display:flex; flex-direction:column; gap:var(--s3); }
.pt-skrow{ border:1px solid var(--line2); border-radius:var(--r); background:var(--surface2);
  padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:.6rem; }
.sk{ background:linear-gradient(90deg,var(--line) 25%,var(--surface2) 37%,var(--line) 63%);
  background-size:400% 100%; border-radius:var(--r-sm); animation:ptshimmer 1.3s ease infinite; height:12px; }
.pt-skrow .sk.a{ width:42%; height:15px; } .pt-skrow .sk.b{ width:100%; height:6px; } .pt-skrow .sk.c{ width:60%; }
@keyframes ptshimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@media (prefers-reduced-motion:reduce){ .sk{ animation:none; } }

/* ============================================================
   RESPONSIVE — the section restacks on its OWN width (container
   query) so it is correct inside the phone frame regardless of
   the shell around it. Mirrors the .linelink approach.
   ============================================================ */
@container (max-width:520px){
  .pt-src-band{ margin-left:0; width:100%; }
  .pt-actions .btn{ flex:1 1 100%; min-width:0; }
  .pt-door .door-acts .btn{ flex:1 1 100%; min-width:0; }
}
@media (pointer:coarse){
  .ptsec .btn,.pt-seg button,.pt-quick button,.pt-step{ min-height:44px; }
  .pt-t-del{ width:38px; height:38px; }
}

/* phone-frame preview (studio "Mobile" toggle) — same trick the
   line_link prototype uses; prototype-only. */
#app.mobile .rail{ display:none; }
#app.mobile .content{ max-width:412px; margin:0 auto; border-inline:1px solid var(--line); }
#app.mobile .wbbody{ padding-left:var(--s4); padding-right:var(--s4); }
#app.mobile .prefwrap{ max-width:none; }