/* watch.html: a shopper's watched products and their history.
   Every product card has the same shape: fixed table columns with fixed
   widths, so a long promotion or a missing price never moves anything. */
:root {
    --wt-bg: #f6f6f8;
    --wt-surface: #ffffff;
    --wt-surface-2: #fafafc;
    --wt-border: #e4e4ea;
    --wt-text: #16161d;
    --wt-text-2: #55556a;
    --wt-muted: #8a8aa0;
    --wt-accent: #4b0082;
    --wt-accent-soft: #f1ebf8;
    /* The search page's own colours (styles.css), so a price, a gap or a
       promotion reads the same on both pages. */
    --wt-good: #34c759;        /* --success: prices, the cheapest, "chênh" */
    --wt-bad: #ff3b30;         /* --danger: dearer, price up, sold out */
    --wt-best-unit: #137333;   /* the best unit price on a size chip */
    --wt-promo: #7c3aed;       /* a deal's wording */
    --wt-tertiary: #8e8e93;    /* struck prices, unit prices */
    --wt-grid: #ececf2;
    --wt-radius: 14px;
    /* Light only, like the search app it opens from (styles.css has no dark
       theme), so the two pages never disagree about what a card looks like. */
    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--wt-bg);
    color: var(--wt-text);
    font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wt-page { max-width: 1040px; margin: 0 auto; padding: 16px 16px 48px; }

/* Row 1: back on the left, the account on the right. Row 2: the title. */
.wt-top { margin-bottom: 16px; }
.wt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.wt-top h1 { margin: 10px 0 0; font-size: 22px; font-weight: 700; }
.wt-back { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--wt-text-2); text-decoration: none; font-size: 14px; }
.wt-back:hover { color: var(--wt-accent); }
/* Holds its place before sign-in, so the bar never changes height. */
.wt-account { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: var(--wt-text-2); visibility: hidden; }
.wt-account.is-in { visibility: visible; }
/* The place the list shows and the account, as two pills with a menu each. */
.wt-account .wt-chip {
    display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 0; max-width: 42vw; padding: 4px 8px 4px 6px;
    border: 1px solid var(--wt-border); border-radius: 999px; background: var(--wt-surface); color: var(--wt-text);
    font: inherit; cursor: pointer;
}
.wt-account .wt-user-chip { max-width: 30vw; }
.wt-account .wt-chip:hover { border-color: var(--wt-accent); }
.wt-chip svg { flex: none; color: var(--wt-accent); }
.wt-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wt-muted { color: var(--wt-muted); }

.wt-card {
    background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: var(--wt-radius); padding: 20px;
}

.wt-signin { max-width: 440px; margin: 48px auto; text-align: center; }
.wt-signin h2 { margin: 0 0 8px; font-size: 19px; }
.wt-signin p { margin: 0 0 20px; color: var(--wt-text-2); }
.wt-google {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px;
    font: 600 15px/1.2 inherit; color: var(--wt-text); background: var(--wt-surface); border: 1px solid var(--wt-border);
    border-radius: 10px; cursor: pointer;
}
.wt-google:hover { background: var(--wt-accent-soft); }
.wt-google:disabled { opacity: .6; cursor: progress; }
.wt-error { margin-top: 12px; min-height: 18px; color: var(--wt-bad); font-size: 13px; }

.wt-sub { margin: -8px 0 14px; font-size: 13px; color: var(--wt-text-2); }
.wt-updating { color: var(--wt-muted); }
.wt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.wt-stat { padding: 14px 16px; }
/* Each figure is a button: it shows only the products it counts (pressed = on). */
/* Its title on top, the figure under it: both tiles start at the top. */
button.wt-stat {
    display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
button.wt-stat:disabled { cursor: default; }
button.wt-stat[aria-pressed="true"] { border-color: var(--wt-accent); box-shadow: inset 0 0 0 1px var(--wt-accent); }
@media (hover: hover) {
    button.wt-stat:hover:not(:disabled) { border-color: var(--wt-accent); }
}
/* The three widest gaps, one product a line. */
.wt-gap { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14px; line-height: 1.5; }
.wt-gap-pct { flex: none; min-width: 3.3em; font-weight: 700; color: var(--wt-good); font-variant-numeric: tabular-nums; }
.wt-gap-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Under its name: the gap's cheapest end is on promotion. */
.wt-gap-note { display: block; white-space: normal; font-size: 12.5px; line-height: 1.35; color: var(--wt-muted); }
.wt-stat-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-stat-title { margin-bottom: 2px; font-size: 13.5px; font-weight: 600; color: var(--wt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-stat-value.is-good, .wt-sum-value.is-good { color: var(--wt-good); }
.wt-stat-value.is-promo { color: var(--wt-promo); }
.wt-spread { color: var(--wt-good); font-weight: 700; }

.wt-list { display: flex; flex-direction: column; gap: 12px; }
/* A heading over the kinds of one fruit, vegetable, fish or cut ("Táo", "Ba rọi heo"). */
.wt-base { margin: 6px 2px -4px; font-size: 15px; font-weight: 700; color: var(--wt-text); }
/* A card's tag sets (watch.js tagsHtml): the one its prices rank in is filled. */
.wt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wt-tags button {
    flex: none; padding: 3px 10px; border: 1px solid var(--wt-border); border-radius: 999px; background: var(--wt-surface);
    font: inherit; font-size: 13px; color: var(--wt-text); white-space: nowrap; cursor: pointer;
}
.wt-tags button[aria-pressed="true"] { background: var(--wt-accent-soft); border-color: var(--wt-accent); color: var(--wt-accent); }
.wt-tags button[aria-pressed="true"] .wt-tab-count { color: var(--wt-accent); }
@media (hover: hover) { .wt-tags button:hover { border-color: var(--wt-accent); } }
/* One selector, its segments joined: one is picked, never several tags side by side. */
.wt-seg { gap: 0; }
.wt-seg button { border-radius: 0; margin-left: -1px; }
.wt-seg button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.wt-seg button:last-child { border-radius: 0 999px 999px 0; }
.wt-seg button[aria-pressed="true"] { position: relative; z-index: 1; }
.wt-base[hidden] { display: none; }

/* ---- Product card ---- */
.wt-product { position: relative; padding: 16px; }
/* The corner x and the history button share the card's right edge: the x
   at the top, the history button at the bottom of the head. */
.wt-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; }
/* The card's top edge: where a shared card's prices are from, then share,
   history and unwatch, one size. */
.wt-acts { display: flex; align-items: center; gap: 6px; align-self: start; min-width: 0; }
.wt-acts .wt-icon-btn { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.wt-who { min-width: 0; max-width: 240px; padding: 0 4px 0 0; border: none; background: none; font: 600 13px/1.3 inherit;
    color: var(--wt-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wt-who:hover { color: var(--wt-accent); }
.wt-thumb { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--wt-border); }
.wt-head-text { min-width: 0; }
.wt-title { font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wt-meta { margin-top: 2px; font-size: 13px; color: var(--wt-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Icon buttons: history toggles (pressed = open), the corner x unwatches. */
.wt-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
    border-radius: 10px; border: 1px solid var(--wt-border); background: var(--wt-surface); color: var(--wt-text-2); cursor: pointer;
}
.wt-icon-btn:hover { color: var(--wt-accent); border-color: var(--wt-accent); }
.wt-history-btn[aria-pressed="true"], .wt-where-btn[aria-pressed="true"] { background: var(--wt-accent); border-color: var(--wt-accent); color: #fff; }
.wt-acts .wt-unwatch { width: 28px; height: 28px; margin-left: 2px; border: none; background: transparent; color: var(--wt-muted); }
/* The card a link just brought. */
.wt-product.is-new { border-color: var(--wt-accent); box-shadow: inset 0 0 0 1px var(--wt-accent); }
.wt-unwatch:hover { color: var(--wt-bad); background: #fdecea; }
.wt-unwatch:disabled { opacity: .5; cursor: progress; }

/* ---- Tables: fixed layout, fixed column widths ---- */
.wt-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--wt-border); border-radius: 10px; }
.wt-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.wt-now { min-width: 968px; }
.wt-table td {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--wt-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-table tbody tr:last-child td { border-bottom: none; }
.wt-table th {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--wt-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: var(--wt-surface-2); color: var(--wt-text-2); font-weight: 600; font-size: 12px;
}
.wt-table .num { text-align: right; }
.wt-table td.is-empty { color: var(--wt-muted); }
.wt-table strong { font-weight: 700; }
.wt-table col.w-now { width: 136px; }
.wt-table col.w-price { width: 96px; }
.wt-table col.w-change { width: 74px; }
/* Narrower since 2026-10-15: the shop column holds each store's distance too.
   116 fits a bold "21.011đ/100g". */
.wt-table col.w-unit { width: 116px; }
/* A kind's "+48%" sits by its price per kilo, not its pack price: the room
   moves with it, or "+48% 222.000đ/kg" ended "222…" (owner 2026-10-15). */
.wt-now.is-kind col.w-now { width: 100px; }
.wt-now.is-kind col.w-unit { width: 152px; }
.wt-table col.w-promo { width: 150px; }
.wt-table col.w-stock { width: 118px; }
.wt-table col.w-act { width: 44px; }
.wt-menu { position: fixed; z-index: 60; min-width: 220px; padding: 6px; border-radius: 12px; background: var(--wt-surface);
  border: 1px solid var(--wt-border); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); display: flex; flex-direction: column; }
.wt-menu button { text-align: left; border: none; background: transparent; font: inherit; font-size: 14px; color: inherit; padding: 9px 12px;
  border-radius: 8px; cursor: pointer; white-space: nowrap; }
.wt-menu button:hover, .wt-menu button:focus-visible { background: var(--wt-bg); outline: none; }
.wt-menu button.is-danger { color: var(--wt-bad); }
.wt-menu hr { border: none; border-top: 1px solid var(--wt-border); margin: 4px 6px; }
.wt-check { display: inline-block; width: 18px; color: var(--wt-accent); font-weight: 700; }
.wt-menu-info { padding: 8px 12px 6px; font-size: 13px; color: var(--wt-text-2); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Where a place is: a name, a map with one pin, and what to do with it.
   Narrower than the shop dialog: .wt-modal sets every dialog's width further
   down this file and won on order alone, so the place dialog names both
   classes (and again on a phone, or this rule would beat .wt-modal's). */
.wt-modal.wt-place-modal { width: min(560px, calc(100vw - 24px)); }
/* At 560 the one-line hint under the title ran out at "gần ghim…": it
   wraps here, as .wt-meta already does on a phone, in two even lines. */
.wt-place-modal .wt-meta { white-space: normal; text-wrap: balance; }
.wt-place-title { font-size: 16px; font-weight: 600; }
.wt-place-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 18px; }
.wt-place-row { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--wt-text-2); }
.wt-place-row > label, .wt-place-row > span { flex: 0 0 52px; }
.wt-place-row input {
    flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--wt-border); border-radius: 8px; font: inherit; color: var(--wt-text);
}
.wt-place-row button {
    padding: 8px 14px; border: 1px solid var(--wt-accent); border-radius: 8px; background: var(--wt-accent); font: inherit; color: #fff; cursor: pointer;
}
.wt-place-note { margin: -4px 0 0 62px; font-size: 13px; color: var(--wt-text-2); }
.wt-place-hits { list-style: none; margin: -4px 0 0 62px; padding: 4px; border: 1px solid var(--wt-border); border-radius: 8px; max-height: 168px; overflow: auto; }
.wt-place-hits button {
    display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px;
    line-height: 1.35; text-align: left; color: var(--wt-text); cursor: pointer;
}
.wt-place-hits button:hover, .wt-place-hits button:focus-visible { background: var(--wt-bg); outline: none; }
.wt-place-hits button[aria-current="true"] { background: var(--wt-accent-soft); }
.wt-place-map {
    display: flex; align-items: center; justify-content: center; height: min(440px, 56vh); border: 1px solid var(--wt-border); border-radius: 10px; overflow: hidden;
}
.wt-place-map > toraken-map { flex: 1 1 auto; align-self: stretch; }
.wt-place-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wt-place-actions button {
    padding: 8px 12px; border: 1px solid var(--wt-border); border-radius: 8px; background: var(--wt-surface); font: inherit; font-size: 14px;
    color: var(--wt-text); cursor: pointer;
}
.wt-place-actions button:disabled { opacity: .6; cursor: default; }
.wt-place-actions .is-primary { margin-left: auto; border-color: var(--wt-accent); background: var(--wt-accent); color: #fff; }
.wt-place-actions .is-danger { color: var(--wt-bad); }
.wt-place-status { font-size: 13px; color: var(--wt-text-2); }
@media (max-width: 760px) {
    /* On a phone the chip names the place; its area is in the menu. */
    .wt-place-area { display: none; }
    .wt-modal.wt-place-modal { width: calc(100vw - 16px); }
    .wt-place-map { height: min(400px, 52vh); }
    .wt-place-body { padding: 12px 14px 16px; }
    .wt-place-note, .wt-place-hits { margin-left: 0; }
}
.wt-undo-stack { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column;
  align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.wt-undo { display: flex; align-items: center; gap: 14px; max-width: 100%; padding: 10px 12px 10px 16px;
  border-radius: 10px; background: #1d1d1f; color: #fff; font-size: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.wt-undo button { flex: none; border: none; background: transparent; color: #64d2ff; font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.wt-undo-left { font-weight: 400; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .7); }
.wt-table td.wt-act-cell { padding: 3px 8px; text-align: center; }
.wt-detail-btn { width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; color: var(--wt-muted); }
.wt-detail-btn:hover { background: var(--wt-surface-2); }
.wt-qty-unit { color: var(--wt-muted); }
.wt-table col.w-when { width: 112px; }
.wt-now-price.is-best { color: var(--wt-good); }
.wt-delta {
    display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 700;
    color: var(--wt-bad); background: rgba(255, 59, 48, .08); vertical-align: 1px;
}
/* rgba(52, 199, 89, .06) on white, solid so the sticky shop column keeps it. */
.wt-table tr.is-best td { background: #f6fcf8; }
.wt-table tr.is-out .wt-now-price, .wt-table tr.is-stale .wt-now-price { color: var(--wt-text-2); opacity: .5; }
.wt-was { color: var(--wt-tertiary); }
.wt-was:not(.is-empty) { text-decoration: line-through; }
.wt-was-under { display: block; font-size: 12px; line-height: 1.3; }
.wt-unit { color: var(--wt-tertiary); }
.wt-unit.is-best { color: var(--wt-best-unit); font-weight: 650; }
.wt-change.is-down { color: var(--wt-good); }
.wt-change.is-up { color: var(--wt-bad); }
.wt-change.is-flat { color: var(--wt-muted); }
.wt-promo-cell:not(.is-empty) { color: var(--wt-promo); }
/* A deal that beats every price paid today, as the search page marks it. */
.wt-promo-cell.is-deal-best { font-weight: 700; }
.wt-deal-lead { color: var(--wt-promo); font-weight: 600; }
.wt-table tr.is-failed td { color: var(--wt-muted); }
.wt-table tr.is-failed .wt-failed-note { color: var(--wt-bad); }

/* The shop cell: colour key (the chart line), favicon, name, status flag. */
.wt-shop-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wt-fav { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 4px; }
.wt-shop-name { min-width: 0; color: var(--wt-text); font-weight: 400; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.wt-shop-name:hover { color: var(--wt-accent); }
.wt-shop-name b { font-weight: 600; }
.wt-flag { display: inline-flex; flex: none; color: var(--wt-muted); cursor: help; }
.shop-mode { display: inline-flex; vertical-align: -1px; margin-left: 5px; color: var(--wt-muted); }
.shop-mode.is-counter { color: #b45309; }
.wt-flag svg { pointer-events: none; }
.wt-flag.is-error { color: var(--wt-bad); }
.wt-flag.is-busy { color: var(--wt-accent); }
.wt-flag.is-busy svg { animation: wt-spin .9s linear infinite; }
@keyframes wt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wt-flag.is-busy svg { animation: none; } }
.wt-stock .wt-status-dot { vertical-align: 0; }

.wt-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--wt-muted); }
.wt-status-dot.is-in { background: var(--wt-good); }
.wt-status-dot.is-out { background: var(--wt-bad); }
/* The chain's nearest store, sold out: a pin with a cross in the dot's place,
   and under it the chain's nearest store that has it, a hint row (watch.js hintRowHtml). */
.wt-near-out { display: inline-flex; flex: none; margin: 0 4px 0 -3px; vertical-align: -2px; color: var(--wt-bad); cursor: help; }
.wt-near-out svg { pointer-events: none; }
.wt-table tr.has-alt td { border-bottom-color: transparent; }
.wt-table tr.wt-alt td { padding-top: 0; color: var(--wt-text-2); font-size: 12.5px; }
.wt-alt .wt-shop-name { color: var(--wt-text-2); }
.wt-alt-turn { display: inline-flex; flex: none; justify-content: center; width: 16px; color: var(--wt-muted); }
/* How far each store is from the place shown: every row, the hint's too. */
.wt-km { flex: none; color: var(--wt-muted); font-size: 11.5px; font-weight: 400; white-space: nowrap; }
.wt-shop-line { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* ---- History ---- */
.wt-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wt-border); }
.wt-history[hidden] { display: none; }
.wt-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.wt-sum { padding: 8px 10px; border-radius: 10px; background: var(--wt-surface-2); border: 1px solid var(--wt-border); min-width: 0; }
.wt-sum-label { font-size: 12px; color: var(--wt-text-2); }
.wt-sum-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wt-chart h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.wt-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: var(--wt-text-2); }
.wt-key i { display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 2px; }
.wt-chart h3.wt-chart-next { margin-top: 14px; }
.wt-chart-plot { position: relative; }
.wt-chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Height set inline: the price chart's own (PRICE_H in watch.js). */
.wt-chart-empty {
    display: flex; align-items: center; justify-content: center; border-radius: 10px;
    background: var(--wt-surface-2); border: 1px dashed var(--wt-border); color: var(--wt-muted); font-size: 13px;
}
.wt-axis { font-size: 11px; fill: var(--wt-muted); font-variant-numeric: tabular-nums; }
.wt-gridline { stroke: var(--wt-grid); stroke-width: 1; }
/* A line ends in its shop's favicon at its last value, ringed in the line's
   colour (dashed past eight shops, as the line is). */
.wt-end { position: absolute; display: flex; gap: 2px; transform: translateY(-50%); }
.wt-end-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border: 2px solid; border-radius: 6px; background: var(--wt-surface); transition: opacity .12s;
}
.wt-end-icon.is-dashed { border-style: dashed; }
.wt-end-icon.is-plain { border: 1px solid var(--wt-border); }
.wt-end-icon .wt-fav { width: 14px; height: 14px; border-radius: 3px; }
.wt-end-more { font-size: 10px; font-weight: 600; color: var(--wt-muted); }
.wt-leader { fill: none; stroke: var(--wt-muted); stroke-width: 1; stroke-dasharray: 1 2; }
.wt-series, .wt-hover-dot { transition: opacity .12s; }
/* The shop pointed at (its table row, log, favicon or line) stays; the rest fade. */
.wt-chart-plot.is-focus .wt-series:not(.is-on), .wt-chart-plot.is-focus .wt-hover-dot:not(.is-on) { opacity: .12; }
.wt-chart-plot.is-focus .wt-end-icon:not(.is-on) { opacity: .3; }
/* Stock rows: a pale band for the state, a solid bar for the count. */
.wt-band.is-in, .wt-key .is-in { fill: rgba(52, 199, 89, .16); background: rgba(52, 199, 89, .16); }
.wt-band.is-out, .wt-key .is-out { fill: rgba(255, 59, 48, .16); background: rgba(255, 59, 48, .16); }
.wt-qty { fill: var(--wt-good); background: var(--wt-good); shape-rendering: crispEdges; }
.wt-key .is-qty { fill: var(--wt-good); background: var(--wt-good); }
.wt-band { shape-rendering: crispEdges; }
/* The shop pointed at: a row with only "Còn/Hết" (no count) stayed as pale as the rest. */
.wt-chart-plot.is-focus .wt-series.is-on .wt-band.is-in { fill: rgba(52, 199, 89, .45); }
.wt-chart-plot.is-focus .wt-series.is-on .wt-band.is-out { fill: rgba(255, 59, 48, .42); }
.wt-chart-plot.is-focus .wt-series.is-on .wt-stock-val { font-weight: 600; }
.wt-stock-val { font-size: 12px; font-weight: 600; fill: var(--wt-text); font-variant-numeric: tabular-nums; }
.wt-stock-val.is-out { fill: var(--wt-bad); }
.wt-track { stroke: var(--wt-border); stroke-width: 1; stroke-dasharray: 2 3; }
.wt-stock-val[data-tip] { fill: var(--wt-muted); cursor: help; }
.wt-crosshair { stroke: var(--wt-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.wt-tip {
    position: absolute; pointer-events: none; z-index: 2; padding: 6px 9px; border-radius: 8px; font-size: 12px; line-height: 1.4;
    background: var(--wt-text); color: var(--wt-surface); white-space: nowrap; text-align: left; transform: translate(-50%, calc(-100% - 10px));
}
.wt-tip-row { display: flex; align-items: center; gap: 6px; }
/* The pointed line's row stays; the other shops' rows fade. */
.wt-chart-plot.is-focus .wt-tip-row:not(.is-on) { opacity: .35; }
.wt-tip-row b { margin-left: auto; padding-left: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wt-tip-product { max-width: 240px; overflow: hidden; text-overflow: ellipsis; opacity: .7; }
/* A phone's chart is narrow: the product name gives way, the price stays. */
@media (max-width: 600px) { .wt-tip-product { max-width: 110px; } }
.wt-tip .wt-fav { width: 14px; height: 14px; border-radius: 3px; background: #fff; }
.wt-tip[hidden] { display: none; }
/* The page's hover text: data-tip explanations and cut-off cells in full. */
/* Over the sticky search and tabs (20) and their suggestions (30), under a menu or the undo note. */
.wt-hint {
    position: fixed; z-index: 40; max-width: min(360px, calc(100vw - 16px)); padding: 6px 9px; border-radius: 8px;
    background: var(--wt-text); color: var(--wt-surface); font-size: 12px; line-height: 1.45; white-space: pre-line;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18); user-select: text; -webkit-user-select: text; cursor: text;
}
.wt-hint[hidden] { display: none; }

.wt-log-wrap { margin-top: 8px; }
.wt-log-wrap .wt-table { min-width: 560px; }
.wt-log-empty { color: var(--wt-muted); text-align: center; }
.wt-log-more {
    display: block; width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px dashed var(--wt-border); border-radius: 10px;
    background: var(--wt-surface-2); color: var(--wt-text-2); font: inherit; font-size: 13px; cursor: pointer;
}
.wt-log-more:hover { color: var(--wt-accent); border-color: var(--wt-accent); }
.wt-log-more[hidden] { display: none; }

/* One shop in detail, over the page; the page behind does not scroll. */
html.wt-modal-open { overflow: hidden; }
.wt-modal {
    width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; border: none; border-radius: var(--wt-radius);
    background: var(--wt-surface); color: var(--wt-text); box-shadow: 0 16px 48px rgba(0, 0, 0, .25); overflow: auto; overscroll-behavior: contain;
    /* The scrollbar's room is kept from the start, so a chart measured before
       the content overflows is not squeezed once it does. */
    scrollbar-gutter: stable;
}
.wt-modal:focus { outline: none; }
.wt-modal::backdrop { background: rgba(22, 22, 29, .45); }
.wt-modal-head {
    position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px 12px 20px; background: var(--wt-surface); border-bottom: 1px solid var(--wt-border);
}
.wt-modal-title { min-width: 0; }
.wt-modal-title .wt-shop-cell { font-size: 15px; }
.wt-modal-body { padding: 16px 20px 20px; }
.wt-modal-body > h3 { margin: 18px 0 0; font-size: 14px; font-weight: 600; }

.wt-empty { text-align: center; padding: 40px 20px; color: var(--wt-text-2); }

@media (max-width: 760px) {
    .wt-stats { gap: 8px; }
    .wt-stat { padding: 12px; }
    .wt-stat-value { font-size: 18px; }
    /* The top row on its own line: the name keeps the card's width. */
    .wt-head { grid-template-columns: 56px minmax(0, 1fr); row-gap: 10px; min-height: 56px; }
    .wt-acts { grid-column: 1 / -1; grid-row: 1; justify-content: flex-end; }
    .wt-who { margin-right: auto; max-width: none; }
    .wt-thumb { width: 56px; height: 56px; }
    .wt-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The shop stays in view while the columns scroll. */
    .wt-now td:first-child { position: sticky; left: 0; z-index: 1; background: var(--wt-surface); box-shadow: 1px 0 0 var(--wt-border); }
    .wt-now tr.is-best td:first-child { background: #f6fcf8; }
    .wt-now th:first-child { position: sticky; left: 0; z-index: 1; background: var(--wt-surface-2); box-shadow: 1px 0 0 var(--wt-border); }
    /* The detail button stays in reach while the columns scroll. */
    .wt-now td:last-child { position: sticky; right: 0; z-index: 1; background: var(--wt-surface); box-shadow: -1px 0 0 var(--wt-border); }
    .wt-now tr.is-best td:last-child { background: #f6fcf8; }
    .wt-now th:last-child { position: sticky; right: 0; z-index: 1; background: var(--wt-surface-2); box-shadow: -1px 0 0 var(--wt-border); }
    .wt-modal { width: calc(100vw - 16px); max-height: calc(100vh - 32px); }
    .wt-modal-body { padding: 14px 14px 16px; }
    /* Shop, price and the pinned detail button share the table's width, so
       the price never sits under the button: at 390px a fixed 150px shop
       column left "185.0" of 185.000đ in view. 136px is the price, 44px the
       button; the rest of the columns scroll as before. */
    .wt-table-wrap { container-type: inline-size; }
    .wt-now { min-width: 0; }
    .wt-now col:first-child { width: max(96px, calc(100cqw - 180px)); }
    /* The spread and the product it belongs to are the point of these
       lines: on a phone they wrap instead of ending in "chênh 3…". */
    .wt-meta, .wt-stat-title { white-space: normal; }
}
.wt-stock-none { color: var(--wt-muted); }
/* A stock reading older than the row's price: shown, dimmed, with when it was read. */
.wt-stock-old { opacity: .55; }
.wt-stock-at { color: var(--wt-muted); font-size: 12px; margin-left: 4px; }
/* A kind (one cut at every chain): each row names its pack under the shop. */
.wt-shop-stack { display: flex; flex-direction: column; min-width: 0; }
.wt-kind-pack { font-size: 11.5px; color: var(--wt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- The search, its Ngành hàng menu, and the Nhóm hàng tabs under it ---- */
.wt-tools { margin-bottom: 12px; }
.wt-tools [hidden] { display: none !important; }
.wt-search {
    position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 12px;
    border: 1px solid var(--wt-border); border-radius: 12px; background: var(--wt-surface); color: var(--wt-muted);
}
.wt-search:focus-within { border-color: var(--wt-accent); }
.wt-search > svg { flex: none; }
.wt-search input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: none; outline: none; background: transparent;
    font: inherit; color: var(--wt-text);
}
.wt-search input::-webkit-search-cancel-button { display: none; }
.wt-search-clear {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0;
    border: none; border-radius: 50%; background: transparent; color: var(--wt-muted); cursor: pointer;
}
.wt-search-clear:hover { color: var(--wt-text); background: var(--wt-bg); }
/* The Ngành hàng menu, at the right end of the search box: always in the
   accent, "Tất cả" too, so it reads as a live control (owner 2026-10-13). */
.wt-cat {
    display: inline-flex; align-items: center; flex: none; max-width: 50%; height: 32px; padding: 0 8px 0 12px;
    border: none; border-radius: 8px; background: var(--wt-accent-soft); font: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--wt-accent); cursor: pointer;
}
.wt-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-cat-count { flex: none; white-space: pre; font-variant-numeric: tabular-nums; }
.wt-cat svg { flex: none; margin-left: 6px; color: var(--wt-accent); }
@media (hover: hover) {
    .wt-cat:hover { box-shadow: inset 0 0 0 1px var(--wt-accent); }
}
.wt-cat-menu { max-height: calc(100vh - 16px); overflow-y: auto; }
.wt-cat-menu button { display: flex; justify-content: space-between; gap: 24px; }
.wt-cat-menu button.is-on, .wt-cat-menu button.is-on:hover { background: var(--wt-accent-soft); color: var(--wt-accent); font-weight: 600; }
.wt-cat-menu button.is-on .wt-tab-count { color: var(--wt-accent); }
.wt-cat-menu button.is-empty { opacity: .45; }
.wt-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 380px; overflow-y: auto; padding: 6px;
    border: 1px solid var(--wt-border); border-radius: 12px; background: var(--wt-surface); box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
.wt-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--wt-text); cursor: pointer; }
.wt-option:hover, .wt-option[aria-selected="true"] { background: var(--wt-bg); }
.wt-option img, .wt-option-img { flex: none; width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: #fff; }
.wt-option-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-option.is-group .wt-option-text { font-weight: 600; }
.wt-option-kind { flex: none; font-size: 12px; color: var(--wt-muted); }
.wt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* A retail area's anchor stores, above its list. */
.wt-area-tabs { margin: 0 0 14px; }
/* Its cards while the tab loads, and the button that draws a card's every store. */
.wt-skel { height: 180px; background: #f1f1f4; border-color: transparent; }
.wt-more-row td { text-align: center; padding: 8px 0; }
.wt-more { border: 0; background: none; color: var(--wt-accent); font: inherit; cursor: pointer; }
.wt-tabs button {
    flex: none; padding: 5px 12px; border: 1px solid var(--wt-border); border-radius: 999px; background: var(--wt-surface);
    font: inherit; font-size: 13.5px; color: var(--wt-text); white-space: nowrap; cursor: pointer;
}
.wt-tabs button[aria-selected="true"] { background: var(--wt-accent); border-color: var(--wt-accent); color: #fff; }
.wt-tabs button.is-empty { opacity: .45; }
.wt-tab-count { color: var(--wt-muted); font-variant-numeric: tabular-nums; }
.wt-tabs button[aria-selected="true"] .wt-tab-count { color: rgba(255, 255, 255, .75); }
/* Once a row has one of its own picked, the others keep their chip but grey their text. */
.wt-tabs.is-narrowed button[aria-selected="false"] { color: var(--wt-muted); }
.wt-tabs.is-narrowed button[aria-selected="false"] .wt-tab-count { opacity: .7; }
/* Hover only with a mouse: a phone keeps the tab tapped "hovered", undimmed. */
@media (hover: hover) {
    .wt-tabs button:hover { border-color: var(--wt-accent); }
    .wt-tabs.is-narrowed button[aria-selected="false"]:hover { color: var(--wt-text); }
}
/* The Nhóm hàng row reads as the level under the Ngành hàng picked; the link
   to the tab picked sits at its end, outside the sliding row. */
.wt-tabline { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.wt-tabline .wt-subtabs { flex: 1; min-width: 0; margin-top: 0; }
.wt-tab-share { flex: none; width: 32px; height: 32px; border-radius: 9px; }
.wt-subtabs button { padding: 4px 10px; border-radius: 6px; font-size: 13px; }
.wt-subtabs button[aria-selected="true"] { background: var(--wt-accent-soft); border-color: var(--wt-accent); color: var(--wt-accent); }
.wt-subtabs button[aria-selected="true"] .wt-tab-count { color: var(--wt-accent); }
/* On a wide screen the search and tabs stay in view over a long list. */
@media (min-width: 761px) {
    .wt-tools { position: sticky; top: 0; z-index: 20; padding: 8px 0 4px; background: var(--wt-bg); }
}
/* On a phone the tab rows slide sideways, edge to edge, like the search page's chip rows. */
@media (max-width: 760px) {
    .wt-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .wt-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 768px) and (pointer: coarse) {
    .wt-tabs { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50% + 4px); }
    /* The Nhóm hàng row runs from the screen's edge up to its share icon. */
    .wt-tabline .wt-subtabs { margin-right: 0; padding-right: 4px; }
}

/* A shared card near this shopper: a shop whose chain's nearest store does not sell it. */
.wt-far { display: block; white-space: normal; font-size: 11.5px; line-height: 1.35; color: var(--wt-text-2); }

/* ---- A shared link, not signed in: the card, then "Theo dõi" to sign in ---- */
.wt-guest-note { margin: -4px 0 14px; font-size: 13.5px; color: var(--wt-text-2); }
span.wt-who { cursor: default; }
span.wt-who:hover { color: var(--wt-text-2); }
.wt-follow {
    flex: none; height: 32px; padding: 0 14px; margin-left: 2px; border: 1px solid var(--wt-accent); border-radius: 999px;
    background: var(--wt-accent); color: #fff; font: 600 13.5px/1 inherit; white-space: nowrap; cursor: pointer;
}
.wt-login-link {
    padding: 4px 12px; border: 1px solid var(--wt-border); border-radius: 999px; background: var(--wt-surface);
    font: 600 13px/1.3 inherit; color: var(--wt-text); cursor: pointer;
}
.wt-login-link:hover { border-color: var(--wt-accent); }
.wt-login-link:disabled { opacity: .6; cursor: progress; }
.wt-summary.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wt-modal.wt-follow-modal { width: min(420px, calc(100vw - 24px)); }
.wt-follow-body { padding: 20px 22px 16px; text-align: center; }
.wt-follow-body h3 { margin: 14px 0 6px; font-size: 18px; }
.wt-follow-body > p { margin: 0 0 16px; font-size: 14px; color: var(--wt-text-2); }
.wt-follow-product { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--wt-border); border-radius: 12px; text-align: left; }
.wt-follow-product .wt-thumb { width: 44px; height: 44px; flex: none; }
.wt-follow-product b { display: block; font-size: 14px; line-height: 1.35; }
.wt-follow-product span { font-size: 13px; font-weight: 700; color: var(--wt-good); }
.wt-follow-later { margin-top: 4px; padding: 6px; border: none; background: none; font: inherit; font-size: 14px; color: var(--wt-text-2); cursor: pointer; }
@media (max-width: 760px) {
    .wt-summary.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wt-follow { padding: 0 12px; }
}

/* ---- The price report of a Nhóm hàng (watch-report.js): every kind on one price ruler ---- */
.wt-tab-report { flex: none; width: 32px; height: 32px; border-radius: 9px; }
.wt-tab-report.is-busy { cursor: progress; opacity: .6; }
.wt-modal.wr-modal { width: min(1080px, calc(100vw - 48px)); max-height: calc(100vh - 32px); }
.wr-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: 12px; padding: 14px 24px 6px; background: var(--wt-surface); }
.wr-head h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.wr-title { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
/* where the prices are read: a quiet detail beside the name (owner 2026-10-16: dim, not purple) */
.wr-place { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; color: var(--wt-muted); font-size: 13px; line-height: 1.3; }
.wr-place svg { flex: none; width: 13px; height: 13px; }
.wr-place > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-chains { flex: none; display: flex; flex-wrap: nowrap; gap: 2px; margin: 2px 0 0 auto; }
.wr-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; background: none; cursor: pointer; }
.wr-chip:hover { background: var(--wt-surface-2); }
.wr-chip[aria-pressed="true"] { background: var(--wt-accent-soft); box-shadow: inset 0 0 0 1px var(--wt-accent); }
.wr-chip img { width: 16px; height: 16px; object-fit: contain; mix-blend-mode: multiply; }
.wr-close { flex: none; width: 36px; height: 36px; margin-left: 6px; border: none; }
.wr-ruler { position: relative; margin: 0 24px; }
.wr-axis { position: sticky; top: var(--wr-headH, 56px); z-index: 2; height: 28px; background: var(--wt-surface); box-shadow: 0 1px 0 var(--wt-grid);
  font-size: 12.5px; font-weight: 500; color: var(--wt-text-2); font-variant-numeric: tabular-nums; }
.wr-axis span { position: absolute; top: 5px; transform: translateX(-50%); white-space: nowrap; transition: opacity .15s; }
.wr-axis .wr-far { color: var(--wt-muted); }
.wr-axis .wr-gp { transform: none; padding: 0 4px; background: var(--wt-surface); color: var(--wt-text); font-weight: 700; z-index: 1; transition: none; }
.wr-axis .wr-gp[hidden] { display: none; }
.wr-axis.is-hint span:not(.wr-gp) { opacity: .2; }
.wr-axis.is-hint span.is-under { opacity: 0; }
.wr-plot { display: block; touch-action: manipulation; }
.wr-row { cursor: pointer; outline: none; }
.wr-row:focus-visible rect { stroke: var(--wt-accent); }
.wr-label { transition: opacity .15s; }
.wr-label.is-far { opacity: .25; }
.wr-zone { transition: opacity .15s; cursor: pointer; }
.wr-zone.is-fade { opacity: .22; }
.wr-zone.is-far { opacity: .12; }
.wr-band { transition: x .6s cubic-bezier(.3,.7,.25,1), width .6s cubic-bezier(.3,.7,.25,1), y .6s cubic-bezier(.3,.7,.25,1), height .6s cubic-bezier(.3,.7,.25,1); }
.wr-band.is-off { display: none; }
.wr-word { font-size: 11px; fill: var(--wt-text-2); pointer-events: none; }
.wr-word.is-off { display: none; }
.wr-word.is-fade { opacity: .3; }
.wr-word.is-far { opacity: .15; }
.wr-guide { stroke: #6b6b80; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.wr-mk { transition: transform .6s cubic-bezier(.3,.7,.25,1), opacity .3s; cursor: pointer; }
.wr-mk image { mix-blend-mode: multiply; }
.wr-mk.is-off { opacity: 0; pointer-events: none; }
.wr-mk.is-dim { opacity: .14; }
.wr-mk.is-far { opacity: .12; }
.wr-mk.is-fade { opacity: .3; }
.wr-mk.is-out image { filter: grayscale(1); opacity: .5; }
.wr-delta { font-size: 11px; font-weight: 700; opacity: 0; paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
.wr-delta.is-down { fill: var(--wt-best-unit); }
.wr-delta.is-up { fill: var(--wt-bad); }
.wr-delta.go { animation: wr-fade 1.8s ease-out; }
@keyframes wr-fade { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }
.wr-tip { position: absolute; z-index: 4; pointer-events: none; max-width: 260px; padding: 6px 10px 7px; border-radius: 8px; background: var(--wt-surface); color: var(--wt-text);
  box-shadow: 0 4px 16px rgba(22,22,29,.14), 0 0 0 1px rgba(22,22,29,.04); font-size: 12px; line-height: 1.35; }
.wr-tip[hidden] { display: none; }
.wr-t1 { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wr-t1 img { width: 14px; height: 14px; object-fit: contain; mix-blend-mode: multiply; }
.wr-t1 .wr-ch { color: var(--wt-text-2); }
.wr-t1 .wr-from { color: var(--wt-text); font-weight: 600; }
.wr-t1 b { margin-left: auto; padding-left: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.wr-t1 s { color: var(--wt-muted); font-variant-numeric: tabular-nums; }
.wr-t2 { margin-top: 1px; color: var(--wt-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-out { color: var(--wt-bad); font-weight: 600; }
.wr-time { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 8px 24px 14px; background: var(--wt-surface); box-shadow: 0 -1px 0 var(--wt-grid); }
.wr-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--wt-accent); color: #fff; cursor: pointer; }
/* The play button's middle on the timeline's line: the slider (18px, its line in the middle)
   sits 8px down, so its line meets the 34px button's middle; the day ticks hang under it. */
.wr-play, .wr-range { align-self: flex-start; }
.wr-range { position: relative; flex: 1; min-width: 0; margin-top: 8px; padding-bottom: 16px; }
.wr-range input { width: 100%; height: 18px; margin: 0; background: none; -webkit-appearance: none; appearance: none; }
.wr-range input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--wt-accent) var(--fill, 100%), var(--wt-grid) var(--fill, 100%)); }
.wr-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--wt-accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--wt-accent); }
.wr-range input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--wt-accent) var(--fill, 100%), var(--wt-grid) var(--fill, 100%)); }
.wr-range input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--wt-accent); border: 2px solid #fff; }
.wr-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; font-size: 11px; color: var(--wt-muted); }
.wr-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.wr-ticks span::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 5px; background: var(--wt-muted); }
.wr-day { flex: none; min-width: 118px; text-align: right; font-size: 13px; line-height: 1.3; color: var(--wt-text-2); }
.wr-day b { display: block; font-size: 15px; color: var(--wt-text); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
    .wr-head { flex-wrap: wrap; }
    .wr-close { order: 2; }
    .wr-chains { order: 3; flex: 0 0 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 6px 0 0; }
    .wr-chains::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
    .wt-modal.wr-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .wr-head { padding: 12px 16px 6px; }
    .wr-head h2 { font-size: 18px; }
    .wr-title { flex: 1 1 0; }
    .wr-place { flex-basis: 100%; font-size: 12px; }
    .wr-ruler { margin: 0 8px; }
    .wr-time { gap: 10px; padding: 8px 16px 12px; }
    .wr-day { min-width: 92px; }
}