/* ==========================================================================
   C YA AGAIN — the design system
   --------------------------------------------------------------------------
   Everything the passenger site, the dashboard and the driver page use.
   Changed here, changed everywhere.

   Before this file:
     40 font sizes, 65 colours, 19 corner radii across three interfaces.
     Twenty-six pairs of font sizes were less than a pixel apart, which is
     not a hierarchy — it is noise, and it is why nothing looked deliberate.

   After:
     8 sizes. 18 colours. 3 radii. One spacing rhythm.

   Nothing here is a preference. Each value is either a brand colour, a
   measured contrast, or a step on a scale.
   ========================================================================== */

:root{

  /* ---------- TYPE ----------
     Eight sizes, each a clear step from the last. If a size is not on this
     list it does not go on a screen. */
  --t-xs:   0.75rem;    /* 12px — labels in caps, never a sentence */
  --t-sm:   0.875rem;   /* 14px — secondary text */
  --t-base: 1rem;       /* 16px — everything by default */
  --t-md:   1.125rem;   /* 18px — a row title */
  --t-lg:   1.25rem;    /* 20px — a card heading */
  --t-xl:   1.5rem;     /* 24px — a section heading */
  --t-2xl:  2rem;       /* 32px — a page heading */
  --t-3xl:  2.5rem;     /* 40px — a time, on a driver's screen */

  --w-normal: 400;
  --w-medium: 500;
  --w-semi:   600;
  --w-bold:   700;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* ---------- SPACE ----------
     Seven steps. Nothing between them. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;

  /* ---------- SHAPE ----------
     Three. A small thing, a card, and a pill. */
  --r-sm:   8px;
  --r-md:   12px;
  --r-full: 999px;

  --b-hair: 1px;
  --b-firm: 2px;

  /* ---------- COLOUR ----------
     The brand, first. These three do not change between themes. */
  --brand-gold:  #c9a655;
  --brand-red:   #c8202b;
  --brand-cream: #f2ede0;

  /* Dark — the default. A driver at five in the morning, a phone at night. */
  --bg:        #0d0d10;   /* the page */
  --surface:   #17171c;   /* a card, lighter than the page */
  --surface-2: #22222a;   /* a field, or a raised area on a card */
  --line:      #2e2e38;   /* a border you can see */
  --line-firm: #45454f;   /* a border that separates two things */

  --text:      #f5f2ea;   /* 16.1 on the page */
  --text-2:    #b8b4ab;   /*  8.4 — secondary */
  --text-3:    #8a8781;   /*  4.9 — a label, never a sentence */

  --gold:      #e0c176;   /* 10.2 — money, time, the brand */
  --gold-bg:   #2a2415;
  --gold-line: #6b5a2c;

  --red:       #f2a0a6;   /*  8.7 — something is wrong */
  --red-bg:    #2e1416;
  --red-line:  #6e2b30;

  --green:     #8fd8a4;   /* 11.0 — something is settled */
  --green-bg:  #14251a;
  --green-line:#2f5236;

  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.24);
}

/* ---------- LIGHT ----------
   White paper on a grey desk. Not cream, not beige, not tinted. A white card
   on a near-white page measures 1.1 to 1 and reads as one flat sheet, which
   is the whole reason light mode was unreadable. */
html[data-theme="light"]{
  --bg:        #e8e8e6;
  --surface:   #ffffff;
  --surface-2: #f4f4f2;
  --line:      #d8d8d5;
  --line-firm: #a8a8a4;

  --text:      #15151a;   /* 18.2 on white */
  --text-2:    #4a4a50;   /*  8.8 */
  --text-3:    #6c6c73;   /*  5.2 */

  --gold:      #7a5f1f;   /*  6.0 */
  --gold-bg:   #faf4e4;
  --gold-line: #d4c193;

  --red:       #a8151d;   /*  7.5 */
  --red-bg:    #fdf2f2;
  --red-line:  #e0b0b0;

  --green:     #26592d;   /*  7.9 */
  --green-bg:  #f0f6f1;
  --green-line:#b4ceb8;

  --shadow: 0 1px 3px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
}

/* ==========================================================================
   THE PIECES
   Built once here so no screen has to invent its own.
   ========================================================================== */

.cy-label{
  font-family:var(--mono); font-size:var(--t-xs); font-weight:var(--w-semi);
  letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3);
}

.cy-card{
  background:var(--surface); border:var(--b-hair) solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow);
}

/* A row. The whole interface is rows. */
.cy-row{
  display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-4); border-bottom:var(--b-hair) solid var(--line);
  min-height:64px;
}
.cy-row:last-child{ border-bottom:none; }
.cy-row .cy-row-text{ flex:1; min-width:0; }
.cy-row b{ display:block; font-size:var(--t-md); font-weight:var(--w-semi);
  color:var(--text); }
.cy-row small{ display:block; font-size:var(--t-sm); color:var(--text-2);
  margin-top:var(--s-1); line-height:var(--lh-snug); }

/* A button. Four kinds, and no fifth. */
.cy-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:52px; min-width:0; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-full); border:var(--b-hair) solid var(--line-firm);
  background:var(--surface); color:var(--text);
  font-family:var(--sans); font-size:var(--t-base); font-weight:var(--w-semi);
  cursor:pointer; text-decoration:none; overflow-wrap:anywhere;
}
.cy-btn--primary{
  background:var(--brand-gold); color:#0d0d10;
  border:var(--b-firm) solid var(--brand-red);
}
html[data-theme="light"] .cy-btn--primary{ background:#7a5f1f; color:#fff; }
.cy-btn--quiet{ background:transparent; color:var(--text-2);
  font-weight:var(--w-medium); }
.cy-btn--danger{ color:var(--red); border-color:var(--red-line); }

/* A field. 16px exactly, or a phone zooms the page when it is tapped. */
.cy-field{
  width:100%; min-height:52px; padding:var(--s-3) var(--s-4);
  background:var(--surface-2); border:var(--b-hair) solid var(--line-firm);
  border-radius:var(--r-sm); color:var(--text);
  font-family:var(--sans); font-size:16px; box-sizing:border-box;
}
.cy-field:focus{ outline:none; border-color:var(--brand-gold); }
.cy-field::placeholder{ color:var(--text-3); }

/* A switch. One design, everywhere. */
.cy-switch{
  position:relative; flex-shrink:0; width:64px; height:36px;
  border-radius:var(--r-full); cursor:pointer;
  background:var(--surface-2); border:var(--b-firm) solid var(--line-firm);
  transition:background .18s, border-color .18s;
}
.cy-switch::after{
  content:''; position:absolute; top:2px; left:2px; width:28px; height:28px;
  border-radius:50%; background:var(--text-3); transition:transform .18s;
}
.cy-switch[aria-checked="true"]{
  background:var(--brand-gold); border-color:var(--brand-gold);
}
.cy-switch[aria-checked="true"]::after{
  transform:translateX(28px); background:#0d0d10;
}

/* A state. Three, and no more. */
.cy-tag{
  display:inline-flex; align-items:center; gap:var(--s-1);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:var(--w-semi);
  padding:var(--s-1) var(--s-3); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--text-2);
  border:var(--b-hair) solid var(--line);
}
.cy-tag--good{ background:var(--green-bg); color:var(--green);
  border-color:var(--green-line); }
.cy-tag--bad{ background:var(--red-bg); color:var(--red);
  border-color:var(--red-line); }
.cy-tag--gold{ background:var(--gold-bg); color:var(--gold);
  border-color:var(--gold-line); }

/* Something that needs attention. Red, and only red. */
.cy-notice{
  padding:var(--s-4); border-radius:var(--r-md);
  background:var(--red-bg); border:var(--b-hair) solid var(--red-line);
  border-left:4px solid var(--brand-red); color:var(--text);
  font-size:var(--t-base); line-height:var(--lh-body);
}
.cy-notice b{ display:block; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:0.12em; text-transform:uppercase; color:var(--red);
  margin-bottom:var(--s-2); }

/* The gold edge. The marque, and the one thing that never changes. */
.cy-edge{
  position:fixed; inset:0; z-index:60; pointer-events:none; padding:5px;
  top:env(safe-area-inset-top, 0px); bottom:env(safe-area-inset-bottom, 0px);
  background:linear-gradient(150deg, #3d2f16, #9c7a3c 18%, #f0d98a 34%,
    #fff4cf 42%, #f0d98a 50%, #9c7a3c 64%, #c8202b 82%, #3d2f16 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

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


/* ---------- pricing ----------
   The hub reads as a set of answers rather than a set of links: each tile carries the
   figure it controls, so the page tells you what you charge before you click anything. */

.price-hub{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
}
.price-tile{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:22px; border-radius:var(--r-md);
  border:1px solid var(--divider); background:transparent;
  color:inherit; font-family:inherit; font-size:var(--t-base);
  transition:border-color 0.18s, transform 0.18s;
}
.price-tile:hover{ border-color:var(--gold-line); transform:translateY(-2px); }
.price-tile:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.price-tile .pt-name{ font-weight:600; display:flex; align-items:center; gap:9px; }
.price-tile .pt-value{
  font-size:var(--t-lg); color:var(--gold); margin-top:12px;
  font-variant-numeric:tabular-nums; line-height:1.35;
}
.price-tile .pt-note{
  font-size:var(--t-sm); color:var(--text-muted);
  margin-top:8px; line-height:1.6;
}
.price-tile .pt-off{
  display:inline-block; margin-top:12px; padding:3px 10px;
  border-radius:var(--r-full); font-size:var(--t-xs);
  border:1px solid var(--divider); color:var(--text-muted);
}

.back-to{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:none; cursor:pointer;
  color:var(--gold); font-family:inherit; font-size:var(--t-sm);
  padding:6px 0; margin-bottom:6px;
}
.back-to:hover{ text-decoration:underline; }

/* The meter. A fare you can feel before you commit to it. */
.meter{
  border:1px solid var(--gold-line); background:var(--gold-bg);
  border-radius:var(--r-md); padding:22px; margin-bottom:26px;
}
.meter .m-head{
  font-size:var(--t-sm); color:var(--text-muted);
  margin-bottom:14px; line-height:1.6;
}
.meter .m-fields{ display:flex; gap:12px; flex-wrap:wrap; }
.meter .m-fields > div{ flex:1; min-width:184px; }
.meter label{
  display:block; font-size:var(--t-xs); color:var(--text-muted);
  margin-bottom:6px; letter-spacing:0.04em; text-transform:uppercase;
}
.meter input, .meter select{
  width:100%; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--divider); background:var(--bg);
  color:var(--text); font-family:inherit; font-size:var(--t-base);
}
.meter .m-out{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--gold-line);
}
.meter .m-big{
  font-size:var(--t-2xl); font-weight:600; color:var(--gold);
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
}
.meter .m-break{
  font-size:var(--t-sm); color:var(--text-muted);
  line-height:1.8; flex:1; min-width:220px;
}

/* Fields that carry money. Tabular figures so a column of prices lines up. */
.rate-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
.rate-card{
  border:1px solid var(--divider); border-radius:var(--r-md); padding:22px;
}
.rate-card h4{
  font-family:'Fraunces',serif; font-size:var(--t-md);
  margin:0 0 4px; font-weight:500;
}
.rate-card .rc-sub{
  font-size:var(--t-sm); color:var(--text-muted);
  margin-bottom:20px; line-height:1.6;
}
.rate-row{ margin-bottom:18px; }
.rate-row label{
  display:block; font-size:var(--t-sm); margin-bottom:6px; font-weight:500;
}
.rate-row .rr-in{ display:flex; align-items:center; gap:8px; }
.rate-row .rr-pre{ color:var(--text-muted); font-size:var(--t-base); }
.rate-row input{
  flex:1; padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid var(--divider); background:transparent;
  color:var(--text); font-family:inherit; font-size:var(--t-base);
  font-variant-numeric:tabular-nums;
}
.rate-row input:focus{ outline:none; border-color:var(--gold); }
.rate-row .rr-says{
  font-size:var(--t-sm); color:var(--text-muted);
  margin-top:7px; line-height:1.6;
}

/* The save bar states what changes, because a button that only says Save asks you to
   remember what you did. */
.save-bar{
  position:sticky; bottom:0; margin-top:30px;
  padding:16px 0; background:var(--bg);
  border-top:1px solid var(--divider);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.save-bar .sb-says{
  flex:1; min-width:200px; font-size:var(--t-sm);
  color:var(--text-muted); line-height:1.6;
}

.zone-band{
  border:1px solid var(--divider); border-radius:var(--r-md);
  padding:20px; margin-bottom:14px;
}
.zone-band.is-off{ opacity:0.55; }
.zone-cities{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.zone-city{
  padding:5px 12px; border-radius:var(--r-full);
  border:1px solid var(--divider); font-size:var(--t-sm);
}
.zone-city.tuned{ border-color:var(--gold-line); color:var(--gold); }


/* ---------- light ----------
   For the dashboard and the driver page only. A passenger page never sets data-theme, so
   none of this reaches one — the public site is one palette and stays that way.

   Built by redefining the variables the pages already use, not by naming their elements.
   Every measurement below is against the page colour, and every one clears what the
   accessibility guidelines ask for:

     text          13.3:1        muted text     5.2:1
     gold          5.0:1         white card     1.33:1 against the page

   That last figure is the one that matters most. An earlier attempt put white cards on a
   near-white page at 1.1:1 and nothing separated them — the page read as one flat sheet
   with text floating on it. */

html[data-theme="light"]{
  --ink:            #e3dfd4;   /* the page: warm, so white cards sit on it rather than in it */
  --black:          #e3dfd4;
  --black-deep:     #d8d3c6;
  --panel:          #ffffff;
  --panel-raised:   #ffffff;

  --text:           #1a1815;
  --text-muted:     #5f5a51;

  --divider:        rgba(26, 24, 21, 0.14);
  --divider-strong: rgba(26, 24, 21, 0.26);

  /* Gold on white needs to be darker than gold on black, or it disappears. */
  --gold:           #7a5f1f;
  --gold-bright:    #6b5219;
  --gold-hi:        #6b5219;
  --gold-pale:      #8a6b26;
  --gold-deep:      #d9cba4;
  --gold-bg:        #f7f1e2;
  --gold-line:      #cbb684;

  --red:            #a8161f;
  --red-text:       #8f1219;

  --surface:        #ffffff;
  --surface-2:      #1a1815;
}

/* A white card needs an edge on a light page. In the dark theme the background did that
   job on its own. */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .trust-item{
  box-shadow:0 1px 3px rgba(26, 24, 21, 0.07);
}

/* Anything painted a dark colour directly rather than through a variable. There are only
   a few, and they would otherwise stay black on a light page. */
html[data-theme="light"] body{ background:var(--ink); color:var(--text); }

/* A photograph behind white text keeps its white text. Making that dark would leave it
   unreadable against the image, which is the opposite of the point. */
html[data-theme="light"] .hero,
html[data-theme="light"] .hero *,
html[data-theme="light"] [class*="hero"] h1,
html[data-theme="light"] [class*="hero"] p{ color:#ffffff; }

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#ffffff; color:var(--text); border-color:var(--divider-strong);
}

/* A field standing on its own, outside the .sh-field wrapper. Same treatment, because a
   box that looks different from the box beside it reads as a different kind of thing. */
.sh-field-input{
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--divider); background:transparent;
  color:var(--text); font-family:inherit; font-size:var(--t-base);
}
.sh-field-input:focus{ outline:none; border-color:var(--gold); }


/* Both Confirm Reservation buttons: the one in the form and the one in the review panel.
   The class exists so the code can address both; the styling comes from .submit-btn. */
.confirm-reservation{ /* intentionally no visual rules */ }