/* Styles Tailwind can't express, shared by every app page (previously duplicated per file). */
:root { color-scheme: dark; }
body { font-family: "Inter", "Noto Sans Thai", sans-serif; }
.font-thai-num { font-variant-numeric: tabular-nums; }
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.fill1 { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #424754; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #5a6072; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { opacity: 0; animation: riseIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes glowPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.live-dot { animation: glowPulse 1.6s ease-in-out infinite; }
.metric-num { font-feature-settings: "tnum" 1; }
.brand-text {
  background: linear-gradient(120deg, #7fb0ff, #43d5cf 50%, #5fe6a8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.btn-grad { background: linear-gradient(135deg, #1f6bf0, #12a3b8 50%, #1eb87e); color: #fff; }

/* Terms-of-service prose.
   The document body is authored as plain semantic HTML with no classes (scripts/seed-terms.ts), so
   that the SAME stored text renders correctly in three places without being rewritten for each:
   the public /terms page, the acceptance gate in connect.html, and the preview in /admin.
   /terms carries its own copy of these rules because it deliberately does not load this file — it
   must stay readable without the app shell. Keep the two in step. */
.doc { line-height: 1.85; }
.doc .lead { color: #c2c6d6; border-left: 3px solid #2f7bff; padding-left: 1rem; margin: 0 0 1.5rem; }
.doc h2 { font-family: "Hanken Grotesk", "Noto Sans Thai", sans-serif; font-size: 1rem; font-weight: 700; color: #adc6ff; margin: 1.75rem 0 .6rem; }
.doc h2:first-child { margin-top: 0; }
.doc p { margin: 0 0 .9rem; }
.doc ul { margin: 0 0 .9rem; padding-left: 1.25rem; list-style: disc; }
.doc li { margin-bottom: .45rem; }
.doc strong { color: #dae2fd; font-weight: 600; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .78rem; }
.doc th, .doc td { border: 1px solid #424754; padding: .5rem .6rem; text-align: left; vertical-align: top; }
.doc th { background: #222a3d; color: #adc6ff; font-weight: 600; }
/* A three-column table has nowhere to go on a phone, so it scrolls in its own wrapper instead of
   making the whole page scroll sideways. */
.doc .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Wizard stepper — the connecting rule between steps is drawn on the step itself, so the row
   stays a plain flex container and a step can be added without touching the geometry. */
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; text-align: center; }
.step::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 1px; background: #424754; }
.step:last-child::after { display: none; }
.step.done::after { background: rgba(78, 222, 163, 0.55); }
.step-n { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; font-family: "JetBrains Mono", monospace; font-size: 12px; border: 1px solid #424754; background: #131b2e; color: #8c909f; position: relative; z-index: 1; }
.step.done .step-n { background: rgba(78, 222, 163, 0.18); border-color: rgba(78, 222, 163, 0.5); color: #4edea3; }
.step.now .step-n { background: #2f7bff; border-color: #2f7bff; color: #fff; font-weight: 700; }
.step-t { font-size: 11.5px; color: #8c909f; max-width: 12ch; }
.step.now .step-t, .step.done .step-t { color: #c2c6d6; }
.step.now .step-t { color: #dae2fd; font-weight: 600; }

/* Tables that become cards on a phone.
   `overflow-x-auto` was the only concession these tables made to a small screen, and it is not
   one: sideways scrolling inside a page that also scrolls down is hard to discover and gives no
   hint that further columns exist at all. Below md every `.cy-cards` row becomes a card and each
   cell carries its own heading via `data-label`.

   Deliberately CSS-only. The desktop markup and every `rowHtml()` in the app stay exactly as they
   were, so there is no second rendering path to keep in step — the same reason `shell.js` and
   `formDialog` exist. A cell with no `data-label` is the card's title; `.cy-actions` is the button
   row, and its buttons get the 44px floor a finger needs (they are ~26px in the table). */
@media (max-width: 767px) {
  .cy-cards, .cy-cards tbody, .cy-cards tr, .cy-cards td { display: block; width: auto; }
  .cy-cards thead { display: none; }
  .cy-cards { border-collapse: separate; }
  .cy-cards tr {
    background: #131b2e;
    border: 1px solid #424754 !important;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
  }
  .cy-cards tr:last-child { margin-bottom: 0; }
  .cy-cards td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 5px !important;
    text-align: right;
    white-space: normal;
    border: 0;
  }
  .cy-cards td::before {
    content: attr(data-label);
    flex: none;
    text-align: left;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8c909f;
  }
  /* The title cell: no heading, full width, reads as the card's name. */
  .cy-cards td:not([data-label]) { display: block; text-align: left; padding-bottom: 8px !important; }
  .cy-cards td:not([data-label])::before { display: none; }
  .cy-cards td:empty { display: none; }
  /* `.cy-cards td` outranks Tailwind's single-class `.hidden`, so a cell hidden at this width came
     back as a card row. That is not cosmetic: admin.html folds "เจ้าของ" into the shop-name line
     below lg and hides the column, and without this the email is printed twice on every card. */
  .cy-cards td.hidden { display: none !important; }

  .cy-cards td.cy-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    text-align: center;
    margin-top: 7px;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(66, 71, 84, 0.6);
  }
  .cy-cards td.cy-actions::before { display: none; }
  .cy-cards td.cy-actions button,
  .cy-cards td.cy-actions a {
    flex: 1;
    min-height: 44px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* A hard delete sitting the same width as the button beside it, at 44px, on a thumb-driven
     screen, is a mis-tap waiting to happen — and in `banks.html` the neighbour is "ปิด", which
     someone reaches for often. Shrink it to its label and push it to the edge. */
  .cy-cards td.cy-actions .cy-act-danger {
    flex: none;
    padding-left: 14px;
    padding-right: 14px;
    margin-left: 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}