/* ===========================================================================
 *  Loyal Sathi — /tour, the shop owner's panel as a replica.
 *
 *  This file is deliberately small. Everything that looks like the panel IS
 *  the panel: tokens.css, admin.css and theme.css are loaded first and unchanged,
 *  and the page uses their real classes — .a-side, .a-nav-item, .a-shell,
 *  .a-page-head, .card, .kpi, .tbl, .chip, .btn, .feed, .log, .chart-box.
 *
 *  What is here is only the handful of things a replica needs that a real
 *  panel does not:
 *
 *    1. a band that never leaves the top of the screen saying what this is;
 *    2. five screens in one document, one shown at a time;
 *    3. navigation items that are buttons rather than links, because they
 *       switch a screen instead of loading a page;
 *    4. the demonstration's own scaffolding — the customer picker, the card
 *       preview and the closing block — kept visibly apart from the panel
 *       chrome so none of it reads as a feature of the product.
 *
 *  Nothing in admin.css is overridden except where a <button> needs the reset
 *  an <a> did not, and where headings moved down a level so the document has
 *  one h1 and its headings run in order.
 * ======================================================================== */

/* --------------------------------------------------------- five screens ---
   Without JavaScript every screen is simply shown, one after another, which
   is a long page rather than a broken one. The class on <html> is written by
   a single line in the document head, before the first paint, so a screen
   never flashes into view and out again. */
.tour-js .tour-screen{ display: none; }
.tour-js .tour-screen.is-on{ display: block; }

/* Stacked, they need telling apart. */
.tour-screen + .tour-screen{
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 2px dashed var(--line-strong);
}
.tour-js .tour-screen + .tour-screen{ margin-top: 0; padding-top: 0; border-top: 0; }

/* -------------------------------------------------------- the top strip ---
   The band and the phone bar travel as one sticky block, so neither has to
   know how tall the other is and the band can never be scrolled away from.
   It lives inside .a-shell, which is already held clear of the sidebar. */
.tour-stick{
  position: sticky;
  top: 0;
  z-index: 70;
}
.tour-stick .a-top{ position: static; }

.tour-band{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--warn-bg);
  color: var(--warn);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
}
.tour-band p{ margin: 0; flex: 1 1 auto; min-width: 0; }
.tour-band b{ font-weight: 700; }
.tour-band .tb-ico{ display: inline-flex; flex: none; }
.tour-band .tb-ico .icon{ width: 1.3em; height: 1.3em; }
.tour-band .tb-out{ flex: none; }

@media (min-width: 900px){
  .tour-band{ font-size: var(--t-sm); padding: var(--s-2) var(--s-6); }
}
/* On a phone the back arrow in the bar below already leaves the demo, and the
   band's job there is the words. */
@media (max-width: 699.98px){
  .tour-band .tb-out{ display: none; }
}

/* ------------------------------------------------- nav items are buttons ---
   The real sidebar navigates between pages, so its items are links. These
   switch a screen in one document, which is a button's job — and a button
   arrives with a border, a background and the browser's own font. */
.a-nav-item{
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.a-nav .a-nav-item{ margin: 0; }

/* The shop's name wraps here rather than being cut off.
   A real shop's name is usually one word or two and fits the rail; this one
   carries "(Demo)" on the end, and that is the half that says the shop is
   invented — so it is the half that must not be the half an ellipsis eats. */
.a-brand{ white-space: normal; }
.a-shop{ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }

/* .btn is styled for both, but a <button data-goto> inside .acts inherits
   nothing odd — no reset needed there. */

/* A name in the table that opens a record. It has to look like the link the
   real table has, and be a button, because it opens a panel rather than a
   page. */
.tour-linkish{
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}
.tour-linkish:hover{ text-decoration: underline; }

/* ------------------------------------------------------------ headings ----
   The document has one <h1> (visually hidden, naming the whole page), so each
   screen's title is an <h2> and each card's is an <h3>. That keeps the
   headings in order for a screen reader while leaving them the size they are
   in the panel, where every screen is its own page. */
.a-page-head h2,
.a-page-head h3{
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1vw, var(--t-xl));
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
}
.card > h3:first-child,
.card-head h3,
.tour-outro .card h3{ font-size: var(--t-md); }
.card-head h3{ margin: 0; }
.vault-panel .v-head h3{ font-size: var(--t-base); }

/* ------------------------------------------------------ the honest note ---
   The panel's own .msg colours mean something (ok, warning, error). A note
   that says "here is what a replica cannot do" is none of those, so it gets a
   calm informational box of its own. */
.tour-note{
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}
.tour-note p{ margin: 0; }
.tour-note .tn-ico{ display: inline-flex; flex: none; margin-top: 1px; }
.tour-note.tn-inline{ margin: var(--s-4) 0; }

/* ------------------------------------------------- the counter shortcut ---
   Kept visibly apart from the card above it, for the reason /demo keeps its
   stamp button outside the phone: this is the demonstration's scaffolding
   standing in for a QR code, not something a shop would ever see. */
.tour-picks{
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.tour-picks .tp-head{
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-muted);
}
.tour-picks .tp-list{ display: grid; gap: var(--s-1); }
.tour-picks .tp-item{
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.tour-picks .tp-item:hover{ border-color: var(--navy); background: var(--surface-3); }
.tour-picks .tp-item:active{ transform: scale(0.99); }
.tour-picks .tp-item.is-on{ border-color: var(--gold); background: var(--gold-wash); }
.tour-picks .tp-name{ font-size: var(--t-sm); font-weight: 600; color: var(--navy); }
.tour-picks .tp-meta{ font-size: var(--t-xs); color: var(--text-muted); }
.tour-picks .tp-note{
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.tour-picks .tp-none{ padding: var(--s-3); }

@media (min-width: 520px){
  .tour-picks .tp-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px){
  .tour-picks .tp-list{ grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- reward preview ---
   A miniature of the customer's card, redrawn as the tiers are edited. It is
   drawn from the same tokens the real card uses, so it shades itself in the
   invented shop's colours exactly as assets/css/theme.css shades everything
   else on this page. */
.tour-tier{ border-color: var(--line-strong); }
.a-columns .tour-tier{ margin-bottom: var(--s-3); }

.tour-card-preview{
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: var(--grad-navy);
  color: var(--text-on-dark);
}
.tcp-top{ display: flex; align-items: center; gap: var(--s-3); }
.tcp-top b{ font-family: var(--font-display); font-size: var(--t-base); }
.tcp-top .small.muted{ color: var(--gold-soft); }
.tcp-logo{
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--text-on-dark) 14%, transparent);
  color: var(--gold);
}
.tcp-count{
  margin: var(--s-3) 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--gold);
}
.tour-card-preview .progress-track{
  background: color-mix(in srgb, var(--text-on-dark) 22%, transparent);
}
.tcp-dots{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
}
.tcp-dot{
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  border: 1px dashed color-mix(in srgb, var(--text-on-dark) 40%, transparent);
  color: color-mix(in srgb, var(--text-on-dark) 55%, transparent);
  font-size: var(--t-xs);
}
.tcp-dot.is-filled{
  background: var(--gold);
  border-style: solid;
  border-color: var(--gold);
  color: var(--navy-deep);
}
.tcp-dot.is-goal{ border-color: var(--gold); color: var(--gold); }
.tcp-dot.is-goal.is-filled{ color: var(--navy-deep); }
.tcp-dot .icon{ width: 1em; height: 1em; }

.tcp-tiers{ list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.tcp-tiers li{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--text-on-dark) 10%, transparent);
  font-size: var(--t-sm);
}
.tcp-tiers li .tt-badge{
  flex: none;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--navy-deep);
}
.tcp-tiers li.is-off{ opacity: 0.55; }
.tcp-tiers li.is-off .tt-badge{ background: color-mix(in srgb, var(--text-on-dark) 28%, transparent); color: var(--text-on-dark); }
.tcp-empty{ font-size: var(--t-sm); color: var(--gold-soft); margin: var(--s-4) 0 0; }

/* ------------------------------------------------------------ the outro ---
   Permanent, under every screen: what a replica cannot do, and the way on. */
.tour-outro{
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 2px solid var(--line-strong);
}
.tour-outro .to-grid{ display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 860px){
  .tour-outro .to-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.tour-outro .card h3{
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.tour-outro ul{ margin: 0; padding-left: var(--s-4); display: grid; gap: var(--s-2); }
.tour-outro li{ font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--text-muted); }
.tour-outro li b{ color: var(--text); }
.tour-outro .to-foot{
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: var(--lh-snug);
}

/* ------------------------------------------------------- counter screen ---
   A handful of small things the scan replica needs on top of the real
   .result-card / .success-state / .reward-choice styling it borrows. */
.tour-pinhint{
  margin: var(--s-1) 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--info-bg);
  color: var(--info);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
}
.tour-pinhint b{ font-family: var(--font-mono); font-size: var(--t-base); letter-spacing: 3px; }
/* On its own line: inline, it lands mid-sentence beside the digits and reads
   as part of the explanation rather than as a button. */
.tour-pinhint .btn{ display: flex; width: fit-content; margin-top: var(--s-2); }

/* Tap targets. The panel already keeps its buttons at 44px on a phone; these
   are the ones this page adds. */
@media (max-width: 899.98px){
  .tour-band .btn.small{ min-height: 44px; }
  .tour-picks .tp-item{ min-height: 56px; }
  /* .link-btn is a 20px text button in the panel's card headers. On a phone
     that is not something a thumb can hit, and here it moves between screens
     rather than following a link, so it is worth the extra height. */
  .card-head .link-btn{ min-height: 44px; display: inline-flex; align-items: center; }
}

/* ========================================================== THE PLAN ======
   The switcher, and everything that changes with it.

   Kept visibly outside the panel chrome — dashed edge, its own tint — for the
   same reason .tour-picks is: it is the demonstration's own device. A real
   panel has no plan switcher in it, and nothing on this page should teach an
   owner otherwise. */

.tour-plan{
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.tour-plan .tp-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.tour-plan .tp-head h2{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  letter-spacing: var(--track-tight);
}
.tour-plan .tp-head p{
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

/* Three real plans. A card each rather than a segmented control: the price and
   the feature count are the two things somebody is comparing, and they do not
   fit in a tab. */
/* Three across at every width, including a phone. Stacked, three cards plus a
   feature list pushed the panel this page exists to show below the fold — and
   a demonstration you have to scroll past its own sales copy to reach is a
   worse trade than a narrow card. */
.tp-switch{
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tp-plan{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
  padding: var(--s-3);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.tp-plan:hover{ border-color: var(--navy); }
.tp-plan:active{ transform: scale(0.995); }
.tp-plan.is-on{
  border-color: var(--gold);
  background: var(--gold-wash);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.tpp-name{
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--navy);
}
.tpp-price{ font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.tpp-price span{ font-weight: 400; color: var(--text-muted); }
.tpp-count{ font-size: var(--t-xs); color: var(--text-muted); }
.tpp-count b{ color: var(--text); }

.tp-limits{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-2);
  font-size: var(--t-sm);
  color: var(--text);
}
.tp-limits .tpl-lbl{ color: var(--text-muted); }

/* Every feature in the catalogue, in the catalogue's order. The ones the plan
   does not include stay on the page, dimmed, with the plan that lifts them —
   a gap where a feature used to be sells nothing. */
.tp-feats{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.tp-feat{ display: block; }
.tp-feat .tpf-hit{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 4px var(--s-3) 4px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font: inherit;
  font-size: var(--t-xs);
  color: var(--text);
  text-align: left;
}
.tp-feat button.tpf-hit{ cursor: pointer; }
.tp-feat button.tpf-hit:hover{ border-color: var(--navy); background: var(--surface-3); }
.tpf-mark{
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  display: inline-grid;
  place-items: center;
  background: var(--ok, #2E7D5B);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}
.tpf-mark::before{ content: "\2713"; }
.tp-feat.is-off .tpf-hit{
  border-style: dashed;
  background: transparent;
  color: var(--text-muted);
}
.tp-feat.is-off .tpf-mark{ background: var(--line-strong); color: var(--surface); }
.tp-feat.is-off .tpf-mark::before{ content: "\2014"; }
.tpf-by{
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--gold-wash);
  color: var(--navy);
}
/* On a plan that already has it, naming the plan that first sold it is noise. */
.tp-feat.is-on .tpf-by{ display: none; }

.tp-more{ margin-top: var(--s-3); }
/* display:flex on a <summary> throws the browser's own disclosure triangle
   away, so the caret is drawn here instead — a fold with nothing to say it
   folds is a fold nobody opens. */
/* The child combinator matters: this list nests a second <details> inside the
   first, and `.tp-more[open] summary` would flip the inner caret to "open"
   whenever the outer one was. */
.tp-more > summary{
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: var(--t-sm);
  color: var(--navy);
  list-style: none;
}
.tp-more > summary::-webkit-details-marker{ display: none; }
.tp-more > summary::after{
  content: "\25BE";
  margin-left: auto;
  padding-left: var(--s-2);
  font-size: var(--t-base);
  line-height: 1;
}
.tp-more[open] > summary::after{ content: "\25B4"; }
.tp-more > summary b{ font-weight: 700; }
.tp-more[open] > summary{ margin-bottom: var(--s-2); }
.tp-more-in{ margin-top: var(--s-2); }
.tp-more-in > summary{ font-size: var(--t-xs); color: var(--text-muted); min-height: 40px; }
.tp-gloss{ margin: var(--s-2) 0 0; display: grid; gap: var(--s-2); }
@media (min-width: 900px){
  .tp-gloss{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tpg-row{
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--ok, #2E7D5B);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
}
.tpg-row.is-off{ border-left-color: var(--line-strong); opacity: 0.72; }
.tpg-row dt{ font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.tpg-row dd{
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

/* Block, not flex: the icon and the sentence belong on one running line, and a
   flex row eats the space between an inline-flex link's words. */
.tp-cross{
  display: block;
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.tp-cross > .icon{ width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 6px; }
.tp-cross a{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  min-height: 44px;
}

/* A plan sentence under a screen's own heading. */
.tour-planline{ font-size: var(--t-xs); color: var(--text-muted); }

/* ------------------------------------------------ locks in the sidebar ----
   The padlock and the plan that lifts it. The chip's words never change —
   which plan first sells a feature does not depend on which plan you are
   looking at — so switching only ever adds or removes .is-locked. */
.a-nav-item .a-nav-lock{
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: var(--gold-wash);
  color: var(--navy);
}
.a-nav-item.is-locked .a-nav-lock{ display: inline-flex; }
.a-nav-item.is-locked .a-nav-label{ opacity: 0.7; }
.a-nav-item.is-locked .a-nav-ico{ opacity: 0.55; }
.a-nav-lock .icon{ width: 11px; height: 11px; }
/* Collapsed to a rail, the label is gone and so is the room for a chip. */
.ck-side-collapsed .a-nav-item .a-nav-lock{ display: none !important; }

/* --------------------------------------------------- the lock on a screen -
   Gold rather than red. Nothing has gone wrong — there is simply a price on
   what is underneath, and the band's job is to say what it is. */
.tour-lock{
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  background: var(--gold-wash);
}
.tour-lock .tl-ico{ display: inline-flex; flex: none; color: var(--navy); margin-top: 2px; }
.tour-lock .tl-main{ flex: 1 1 260px; min-width: 0; }
.tour-lock .tl-head{ margin: 0; font-size: var(--t-sm); color: var(--text); }
.tour-lock .tl-when{
  margin: 4px 0 0;
  font-size: var(--t-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.tour-lock .tl-acts{ display: flex; flex-wrap: wrap; gap: var(--s-2); flex: none; }

/* ------------------------------------------------------- the new screens --
   Five screens' worth of small pieces. Everything that could be a .card, a
   .tbl or a .chip in the panel already is one; only the shapes the panel has
   no class for are here. */

.tour-list{ margin: 0; padding-left: var(--s-4); display: grid; gap: var(--s-2); }
.tour-list li{ font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-snug); }

/* A browser notification, drawn. */
.tour-push-preview{
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--grad-navy);
}
.tour-push-preview .tpp-chrome{ display: flex; gap: 5px; margin-bottom: var(--s-3); }
.tour-push-preview .tpp-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--text-on-dark) 35%, transparent);
}
.tour-push{
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm, 0 4px 14px rgb(0 0 0 / 18%));
}
.tour-push .tpu-ico{
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--navy); color: var(--gold);
}
.tour-push .tpu-main{ min-width: 0; display: grid; gap: 2px; }
.tour-push .tpu-main b{ font-size: var(--t-sm); color: var(--text); }
.tour-push .tpu-main span{ font-size: var(--t-xs); color: var(--text-muted); line-height: var(--lh-snug); }
.tour-push .tpu-from{ color: var(--text-soft, var(--text-muted)); }

/* The wheel. Each slice is as wide as its odds — drawn by a conic gradient
   whose stops pages/tour.php works out from the prize list, so a slice cannot
   be a different size from the number printed beside it. */
.tour-wheel-wrap{ position: relative; width: fit-content; margin: 0 auto var(--s-3); }
.tour-wheel{
  --wedge-0: var(--gold);
  --wedge-1: var(--navy);
  width: clamp(150px, 44vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid var(--surface);
  box-shadow: 0 0 0 2px var(--line-strong), var(--shadow-sm, 0 6px 18px rgb(0 0 0 / 14%));
}
.tour-wheel-pin{
  position: absolute;
  top: -4px; left: 50%;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 15px solid var(--navy-deep, var(--navy));
}

.tour-odds{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.tour-odds li{ display: flex; align-items: center; gap: var(--s-3); }
.tour-odds .to-ico{
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--gold-wash); color: var(--navy);
}
.tour-odds .to-main{ flex: 1 1 auto; min-width: 0; }
.tour-odds .to-main b{ display: block; font-size: var(--t-sm); font-weight: 600; }
.tour-odds .to-bar{
  display: block; height: 6px; margin-top: 4px;
  border-radius: var(--r-full); background: var(--surface-3); overflow: hidden;
}
.tour-odds .to-bar span{ display: block; height: 100%; background: var(--gold); }
.tour-odds .to-num{ flex: none; font-size: var(--t-sm); font-weight: 700; color: var(--navy); }

/* The menu. Two categories of a tea shop that does not exist. */
.tour-menu-cat + .tour-menu-cat{
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.tour-menu-cat .tmc-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2);
}
.tour-menu-cat .tmc-head h4{
  margin: 0; font-family: var(--font-display); font-size: var(--t-base); color: var(--navy);
}
.tour-menu-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.tour-menu-list li{ display: flex; align-items: center; gap: var(--s-3); }
.tour-menu-list .tm-thumb{
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--surface-3); color: var(--text-muted);
}
.tour-menu-list .tm-main{ flex: 1 1 auto; min-width: 0; }
.tour-menu-list .tm-main b{ display: block; font-size: var(--t-sm); }
.tour-menu-list .tm-main span{ font-size: var(--t-xs); color: var(--text-muted); }
.tour-menu-list .tm-price{ flex: none; font-size: var(--t-sm); font-weight: 600; color: var(--navy); }

.tour-qr-card{
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); margin: var(--s-3) 0;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface-2);
  width: fit-content;
}
.tour-qr-card .tqc-code{
  display: grid; place-items: center; flex: none;
  width: 62px; height: 62px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); color: var(--navy);
}
.tour-qr-card .tqc-code .icon{ width: 40px; height: 40px; }
.tour-qr-card .tqc-txt{ display: grid; gap: 2px; }
.tour-qr-card .tqc-txt b{ font-size: var(--t-sm); }
.tour-qr-card .tqc-txt span{ font-size: var(--t-xs); color: var(--text-muted); }

/* Tap targets on the pieces this page adds below 900px. */
@media (max-width: 899.98px){
  .tp-feat .tpf-hit{ min-height: 44px; }
  .tour-lock .tl-acts .btn{ min-height: 44px; }
}
/* Three cards across 350px of phone. The price stays; the wording around it
   goes, because a card too narrow to read its own name is worth less than a
   short one. */
@media (max-width: 619.98px){
  .tour-plan{ padding: var(--s-3); }
  .tp-plan{ padding: var(--s-2); min-height: 76px; }
  .tpp-name{ font-size: var(--t-sm); }
  .tpp-price{ font-size: var(--t-xs); }
  .tpp-price span{ display: block; }
  .tpp-count{ font-size: 10px; }
}

/* Nothing here clips the viewport sideways: admin.css already sets
   `overflow-x: hidden` on <html>, and deliberately NOT on <body> — read the
   comment above that rule before adding one. The tables and charts on this
   page scroll inside their own .tbl-wrap and .chart-box, as they do in the
   panel, so there is nothing left to clip. */

/* ============================================================================
 *  THE SETTINGS SCREEN
 *
 *  Drawn as ordinary panel cards with every control disabled, so it reads as
 *  the real screen switched off rather than as a picture of one. Only the
 *  pieces the panel has no equivalent for are styled here.
 * ==========================================================================*/

/* The real colour schemes, from LS_THEME_PRESETS. Two-tone because that is
   exactly what a shop chooses: a main and an accent. */
.tset-swatches{
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-2);
}
.tset-sw{
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: var(--t-xs); color: var(--text-muted);
}
.tset-sw i{
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--sw-main) 0 55%, var(--sw-accent) 55%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
}
.tset-sw.is-on i{ border-color: var(--text); }
.tset-sw.is-on b{ color: var(--text); }
.tset-sw b{ font-weight: 600; }

/* Logo / cover slots. Named files rather than a drawn photo: the point is
   which two images a shop supplies, not what they look like. */
.tset-uploads{ display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.tset-up{
  display: flex; align-items: center; gap: var(--s-2);
  padding: 9px var(--s-3); font-size: var(--t-sm); color: var(--text-muted);
  background: var(--surface-2); border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.tset-up b{ margin-left: auto; color: var(--text-soft); font-weight: 600; font-size: var(--t-xs); }

/* Opening hours, one row a day, with the closed day plainly closed. */
.tset-hours{ display: grid; gap: 3px; margin-top: var(--s-2); }
.tset-day{
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: 6px var(--s-3); font-size: var(--t-sm);
  background: var(--surface-2); border-radius: var(--r-sm);
}
.tset-day.is-shut{ color: var(--text-soft); }
.tset-day.is-shut .tsd-time{ font-style: italic; }
.tsd-name{ font-weight: 600; }
.tsd-time{ font-variant-numeric: tabular-nums; }

/* A lock note INSIDE a card, for a feature that gates part of a screen rather
   than the whole of it — the full .tour-lock band would drown the card. */
.tour-lock-inline{
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin: var(--s-3) 0; padding: 9px var(--s-3);
  font-size: var(--t-xs); line-height: 1.45;
  color: var(--warn); background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent);
  border-radius: var(--r-md);
}
.tour-lock-inline .icon{ flex: none; margin-top: 1px; }

/* -------------------------------------------- the two ways out of a plan --- */
/* "See the prices" and "See the customer's card" sit together, because they
   are the two questions the plan block raises and neither should be below the
   fold. */
.tp-acts{ display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* The band's own copy, so the crossing is one tap from every screen. On a
   narrow band the words go and the icon carries it. */
.tb-card{ flex: none; }
@media (max-width: 720px){
  .tb-card span{ display: none; }
}
