/* ==========================================================================
   Indore — your account
   The signed-in page. Balance, plan, buying, gift links, rides, and a plain
   statement of which sign-in the account belongs to.

   Loads AFTER css/base.css, which carries the tokens, the reset, .wrap, the
   type classes, .btn, .cap, .snav, the white .panel card, the .footer and
   the reduced-motion block. What is left here is this page's arrangement.

   The register: calm. The homepage shouts on a photograph; this page is
   read, so it is white end to end, its blocks are the off-white ground plus
   a hairline — the same thing .toc already is — and the only objects that
   float are the two things you can buy.

   Two colours carry the whole page. --primary means "you can ride this".
   --accent means "you can give this away". They are used on nothing else,
   so a reader learns them once at the top and reads the rest by eye.
   ========================================================================== */

/* This page is white from top to bottom, so the shared white focus ring
   would vanish. README says to override it here rather than in base. */
:focus-visible{outline-color:var(--primary)}


/* ==========================================================================
   The two states
   credits — no plan, riding on a balance. The default, and the state
             somebody lands in from a "your credits are running low" email.
   plan    — on the monthly. The state that has a renewal date and a cancel
             button in it.
   Same mechanism as the sign-in page's four faces: everything that differs
   carries .f plus its own state class, and the rest is shared. Hidden states
   are display:none, so a screen reader never meets them.

   .f NEVER goes on an element that needs a display of its own — display:revert
   discards the author's display along with everything else. Put it on a plain
   wrapper and let the element inside keep its layout.
   ========================================================================== */
.f{display:none}
[data-state="credits"] .f--credits,
[data-state="plan"] .f--plan{display:revert}


/* ==========================================================================
   THE PAGE
   Top padding clears the sticky nav — 56px, 64px from 900px up — and leaves
   a gap under it, the same allowance .doc makes.
   ========================================================================== */
.acct{background:var(--white);padding:88px 0 72px}
@media (min-width:900px){.acct{padding:128px 0 96px}}

/* Direct children only. The buy section holds <section class="panel"> cards
   inside it, and those must not pick up the between-sections rhythm. */
.acct>.wrap>section{margin-top:64px}
@media (min-width:900px){.acct>.wrap>section{margin-top:104px}}


/* ---------- the head ---------- */
.acct__head{padding-bottom:28px;border-bottom:1px solid var(--border)}
/* Mono uppercase, the house register for a reading rather than a statement.
   Who the account belongs to is the first thing on the page because on this
   site the sign-in IS the account — there is nothing else to identify it by. */
.acct__who{font-family:var(--mono);font-weight:300;font-size:12px;line-height:1.3;
  letter-spacing:.05em;text-transform:uppercase;color:var(--plum50)}
.acct__title{margin-top:18px;font-family:var(--disp);font-weight:600;letter-spacing:-.01em;
  line-height:1.02;color:var(--plum);font-size:clamp(40px,6.4vw,84px)}
.acct__standfirst{margin-top:18px;font-family:var(--disp);font-weight:500;
  font-size:clamp(19px,2vw,26px);line-height:1.25;color:var(--plum70);max-width:var(--measure)}
@media (min-width:900px){
  .acct__head{padding-bottom:40px}
  .acct__title{margin-top:24px}
  .acct__standfirst{margin-top:24px}
}


/* ---------- section furniture ---------- */
.sec__title{font-size:clamp(26px,2.6vw,36px);color:var(--plum)}
.sec__sub{margin-top:40px;font-size:20px;color:var(--plum)}
.sec__lede{margin-top:14px;max-width:var(--measure);font-size:18px;line-height:1.45;color:var(--plum70)}
.sec__foot{margin-top:20px;max-width:var(--measure)}
/* a link inside a sentence cannot be 44px tall without wrecking the line, so
   the padding buys back what it can without moving anything */
.sec__foot a,.who__body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(38,103,200,.4);padding:8px 0}
.sec__foot a:hover,.who__body a:hover{color:#1d55ab;text-decoration-color:currentColor}


/* ==========================================================================
   THE BALANCE — the problem this page exists to solve
   A credit is not one thing. There are three kinds and they differ in what
   you may do with them, which means three numbers — and three numbers is a
   sum the reader has to do standing up.

   So the two things you can actually DO are the large figures: how many
   rides you can start, and how many credits you can hand to somebody. The
   three sources then sit underneath as the ledger that explains them.

   The two totals overlap, because the middle kind counts towards both. That
   is stated out loud in .bal__note rather than quietly papered over — the
   alternative is a reader who adds 7 and 8, gets 15, and stops trusting the
   page.
   ========================================================================== */
.bal__grid{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* A large phone or a tablet gets the two figures side by side — they are a
   pair and are read against each other — with the plan running full width
   underneath rather than stranded in half a row. Three across from 900. */
@media (min-width:600px){
  .bal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .tile--plan,.bal__note{grid-column:1 / -1}
}
@media (min-width:900px){
  .bal__grid{margin-top:32px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile--plan{grid-column:auto}
  .bal__note{grid-column:1 / -1}
}

/* The off-white ground with a hairline — .toc's treatment, reused. Nothing
   on this page lifts except the two things you can buy. */
.tile{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}
@media (min-width:600px){.tile{padding:24px}}
.tile__l{display:block;color:var(--plum50)}
.tile__v{margin-top:16px;display:flex;align-items:baseline;gap:8px;min-width:0}
.tile__v b{font-family:var(--mono);font-weight:400;font-size:clamp(52px,5.4vw,68px);
  line-height:.9;letter-spacing:0;color:var(--plum)}
/* the unit label is the span that FOLLOWS the number — scoped that way so
   .tile__v--word's own span, which is a word in the display face, is left
   alone rather than being turned into a unit */
.tile__v b+span{font-family:var(--mono);font-weight:300;font-size:12px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;color:var(--plum50)}
.tile__s{margin-top:16px;font-size:16px;line-height:1.35;color:var(--plum70)}

/* the two colours, taught here and used nowhere else */
.tile--ride .tile__l,.tile--ride .tile__v b{color:var(--primary)}
.tile--give .tile__l,.tile--give .tile__v b{color:var(--accent)}

/* A plan is a statement, not a reading, so it is set in the display face
   rather than the mono one. Declared after .tile__v so it wins the display. */
.tile__v--word{display:block;margin-top:20px;font-family:var(--disp);font-weight:600;
  font-size:clamp(32px,3.4vw,44px);line-height:1;letter-spacing:-.01em;color:var(--plum)}

.bal__note{padding-top:16px;border-top:1px solid var(--border);
  font-size:17px;line-height:1.45;color:var(--plum70);max-width:var(--measure)}
.bal__note strong{font-weight:600;color:var(--plum)}


/* ---------- the ledger: one card per kind ----------
   Three cards, identical in shape, so the two permission lines land in the
   same place on each and the pattern can be read straight down the row
   without reading a word. */
.srcs{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* Three across as early as there is room for it. Stacked, the three cards
   are read in sequence and the permission rows are just three more lines;
   side by side they become a column you can read straight down without
   reading a word, which is the whole point of giving them one shape. */
@media (min-width:700px){.srcs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (min-width:900px){.srcs{gap:16px}}
.src{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:20px}
@media (min-width:600px) and (max-width:699px){.src{padding:24px}}
@media (min-width:900px){.src{padding:24px}}
.src__l{display:block;color:var(--plum50)}
.src__v{margin-top:14px;display:flex;align-items:baseline;gap:8px}
.src__v b{font-family:var(--mono);font-weight:400;font-size:36px;line-height:.9;color:var(--plum)}
.src__v b+span{font-family:var(--mono);font-weight:300;font-size:12px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;color:var(--plum50)}
.src__d{margin-top:12px;margin-bottom:18px;font-size:16px;line-height:1.35;color:var(--plum70)}
/* sits with the description, above .perms, so the permission rows stay the
   last thing in all three cards and go on lining up across the row */
.src__f{margin-top:-6px;margin-bottom:18px}

/* margin-top:auto holds the permission block to the foot of the card, so the
   three of them line up however long the descriptions run */
.perms{margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}
.perm{display:flex;align-items:center;gap:10px;min-height:32px;
  font-size:16px;line-height:1.2;color:var(--plum50)}
.perm__i{width:16px;height:16px;flex:0 0 auto}
/* The wording alone carries the fact — "can" or "cannot" — so the tick, the
   dash and the colour are all reinforcement. Nothing here is colour-only. */
.perm--ride.is-yes{color:var(--primary)}
.perm--give.is-yes{color:var(--accent)}


/* ==========================================================================
   THE PLAN, AND THE PACK
   The two things that take money, and the only two objects on the page that
   lift off it. They are the sign-in page's checkout card, unchanged.
   ========================================================================== */
.buy__grid{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1000px){
  .buy__grid{margin-top:36px;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
}
/* .panel caps itself at 440px for the sign-in page's narrow column; here the
   grid already does the capping. The extra bottom padding is for the action
   block, which .panel does not know about. */
.buy__grid .panel{max-width:none;padding-bottom:22px}

.panel__act{margin-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.panel__fine{display:block;max-width:44ch}

/* The outlined button. Cancelling has to be as easy to find as subscribing —
   burying it is exactly the register this brand is against — so it is a
   full-size button in the same place the subscribe button sits, in the panel
   that is already telling you about the plan. It is outlined rather than
   solid because it is not the thing the page is recommending, not because it
   is being hidden. */
.obtn{display:inline-flex;align-items:center;justify-content:center;
  min-height:49px;padding:0 28px;border:1px solid var(--border);border-radius:999px;
  background:transparent;color:var(--plum);cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:18px;line-height:1;white-space:nowrap;
  transition:border-color 150ms linear,color 150ms linear}
.obtn:hover{border-color:var(--plum50);color:var(--primary)}


/* ==========================================================================
   GIFT LINKS
   ========================================================================== */
.gifts__act{margin-top:28px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}

.glist{margin-top:28px;border-top:1px solid var(--border)}
/* Flex and wrap rather than a grid, because this is the row that breaks on a
   phone: the link itself is 26 mono characters and cannot be shortened
   without making it unrecognisable. It takes the whole first line on a narrow
   frame and the rest of the row falls underneath it. */
.grow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;
  padding:16px 0;border-bottom:1px solid var(--border)}
.grow__link{flex:1 1 240px;min-width:0;font-family:var(--mono);font-weight:400;
  font-size:16px;line-height:1.3;color:var(--plum);overflow-wrap:anywhere}
.grow__meta{flex:0 0 auto;font-size:16px;line-height:1.3;color:var(--plum50)}
.grow__state{flex:0 0 auto;font-size:16px;line-height:1.3;color:var(--plum70)}
.grow__state--open{color:var(--accent)}
.grow__done{flex:0 0 auto;margin-left:auto}
@media (min-width:900px){
  .grow{gap:8px 24px}
  .grow__meta{flex:0 0 190px}
  .grow__state{flex:0 0 260px}
}

/* a small pill, sized to the 44px target rather than the 49px of a .btn */
.lbtn{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border:1px solid var(--border);border-radius:999px;
  background:transparent;color:var(--plum);cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;
  transition:border-color 150ms linear,color 150ms linear}
.lbtn:hover{border-color:var(--plum50);color:var(--primary)}
.lbtn.is-done{color:var(--primary);border-color:var(--primary)}


/* ==========================================================================
   RIDES
   The balance only means anything next to what went out of it.
   ========================================================================== */
.rlist{margin-top:28px;border-top:1px solid var(--border)}
.rrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;
  padding:15px 0;border-bottom:1px solid var(--border)}
.rrow__name{flex:1 1 200px;min-width:0;font-size:18px;line-height:1.3;color:var(--plum)}
.rrow__meta{flex:0 0 auto;font-family:var(--mono);font-weight:300;font-size:16px;
  line-height:1.3;color:var(--plum50)}
.rrow__cost{flex:0 0 auto;margin-left:auto;font-family:var(--mono);font-weight:400;
  font-size:16px;line-height:1.3;color:var(--plum70);text-align:right}
.rrow__cost--free{color:var(--plum50)}
/* On a phone the three parts cannot share a line: the longest reading runs
   to 34 mono characters on its own. Left to wrap, some rows keep the cost up
   on line two and some push it to a third, which reads as a fault rather
   than a layout. So below 600 the row is explicitly two lines — what it was
   and what it cost on the first, when and how long on the second — and the
   cost keeps its right-hand column, which is the thing that makes a column
   of figures worth having. */
@media (max-width:599px){
  .rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:baseline}
  .rrow__name{grid-column:1;grid-row:1}
  .rrow__cost{grid-column:2;grid-row:1;margin-left:0}
  .rrow__meta{grid-column:1 / -1;grid-row:2}
}
@media (min-width:900px){
  .rrow{padding:16px 0}
  .rrow__meta{flex:0 0 340px}
}


/* ==========================================================================
   THE ACCOUNT ITSELF
   There is no password, so the sign-in is the account, and that is worth
   saying in words rather than leaving to be inferred. The paragraph about
   losing the inbox is here for the same reason: it is a hole in the product
   today, and a page that pretends otherwise is worse than one that says so
   while nothing is wrong.
   ========================================================================== */
.who__grid{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1000px){
  .who__grid{margin-top:36px;grid-template-columns:minmax(0,1fr) minmax(0,380px);
    gap:56px;align-items:start}
}
.who__body p{font-size:18px;line-height:1.5;color:var(--plum70);max-width:var(--measure)}
.who__body p+p{margin-top:1.1em}
/* set off by a rule rather than a box, the way .doc__body does an aside */
.who__warn{padding-left:18px;border-left:2px solid var(--border);color:var(--plum60)}
.who__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:26px}
.who__link{display:inline-flex;align-items:center;min-height:44px;color:var(--primary);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(38,103,200,.4)}
.who__link:hover{color:#1d55ab;text-decoration-color:currentColor}

.who__rows{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:4px 20px}
@media (min-width:600px){.who__rows{padding:4px 24px}}
/* .panel__row draws its hairline on top; the first one inside a bordered
   block already has the block's own edge above it */
.who__rows .panel__row:first-child{border-top:0}


/* ==========================================================================
   LIVE
   js/account.js fills the page from the account when the head script has
   put data-live on <html> (indoreride.com, no ?state=, no ?edit=). Nothing
   here changes the mockup: the rules below only bite on data-live, or on
   elements that carry `hidden` — which a class with a display of its own
   (.panel__row, .panel__act, .lbtn) would otherwise quietly override.
   ========================================================================== */
[hidden]{display:none!important}

/* the invented numbers never show: the page stays blank until it is filled */
html[data-live="loading"] .acct{visibility:hidden}
/* mockup-only lines the account has no data for (a card number, a date the
   plan started, who sent a gift) */
html[data-live] [data-mock]{display:none!important}
/* when the account could not be read, the head and the reason only */
html[data-live="error"] .acct>.wrap>section,
html[data-live="error"] .acct__who{display:none}
.acct__err{margin-top:18px;font-size:17px;line-height:1.45;color:var(--plum70)}

/* the cancel confirm: the outlined button and a small "keep it" side by side */
.panel__pair{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.panel__pair .lbtn{margin-left:0}
/* a ride longer than ten minutes shows no cost (the account does not say
   what it cost), so the cost column keeps its width and the meta column
   stays lined up down the list */
html[data-live] .rrow__cost{min-width:9ch}

/* two small pills in a gift row: only the first is pushed right */
.lbtn+.lbtn{margin-left:0}

/* "Card and receipts": a button that reads as the links around it */
.lnk{padding:8px 0;border:0;background:none;cursor:pointer;font:inherit;color:var(--primary);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(38,103,200,.4)}
.lnk:hover{color:#1d55ab;text-decoration-color:currentColor}

/* live, the review furniture goes and takes its reserved strip with it */
html[data-live] .rvw{display:none}
html[data-live]{--review-h:0px}


/* ======================================================================
   REVIEW SWITCHER — START
   Review furniture only, the same block the sign-in page carries. Not part
   of the page. Delete from here to the end of the file, plus the matching
   block in account.html, and nothing else changes: --review-h falls back to
   0, the sticky nav returns to the top of the frame and the body padding
   goes with it.
   ====================================================================== */
:root{--review-h:52px}
body{padding-top:var(--review-h)}
.snav{top:var(--review-h)}
.rvw{position:fixed;left:0;right:0;top:0;z-index:90;height:var(--review-h);
  display:flex;align-items:center;gap:12px;padding:0 12px;
  background:#101018;border-bottom:1px solid rgba(255,255,255,.22);
  font-family:var(--body);color:rgba(255,255,255,.55)}
.rvw :focus-visible{outline-color:var(--white)}
.rvw__tag{font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap}
.rvw__btns{display:flex;gap:6px;margin-left:auto}
.rvw__b{height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:transparent;color:rgba(255,255,255,.7);cursor:pointer;
  font-family:var(--body);font-size:13px;line-height:1}
.rvw__b:hover{color:var(--white);border-color:rgba(255,255,255,.45)}
.rvw__b[aria-pressed="true"]{background:var(--white);color:#101018;border-color:var(--white)}
@media (min-width:600px){.rvw{padding:0 20px}.rvw__btns{margin-left:16px}}
/* REVIEW SWITCHER — END */