/* ============================================================================
   house.css — the One yes house style
   Study and Stay™ CONNECT · one-yes.ca

   Every page on this site links this file. It holds the things that should be
   true everywhere: the colours, the buttons, the cards, the form fields, the
   light. Before this existed each page carried its own copy of all of it, which
   is why the buttons on some pages glowed and the buttons on others did not.

   HOW IT FITS TOGETHER
   -------------------
   A page loads this sheet in the <head>, then its own <style> block after it.
   That order matters: anything a page defines for itself still wins. So a page
   can keep a deliberate difference (the intake form's fields are larger than
   the studio's, on purpose) without fighting this file.

   THE RULE FOR CHANGES
   -------------------
   If a change should be true on more than one page, it belongs here. If you
   find yourself pasting the same rule into a second page, that is the signal.

   The living version of this file is the style page: style.html.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. THE TOKENS
   The whole palette, in one place. Everything below is built from these, so
   changing a value here changes it everywhere at once.
   ------------------------------------------------------------------------ */
:root {
  /* THE SAME COLOURS, TWICE.
     Once as a hex value for anything solid, and once as three numbers for the
     places that need a see-through version — a hairline at 20%, a wash at 6%,
     a glow at 35%. That is why you will see rgba(var(--cyan-rgb), 0.2) rather
     than a hard-coded rgba(88, 212, 249, 0.2): change the number here and every
     line, wash and glow on the site follows it.

     The style page (style.html) writes these values, so a new accent colour is
     one click rather than a search and replace. */
  --navy-rgb:        12, 20, 51;
  --navy-lift-rgb:   16, 26, 69;
  --blue-rgb:        22, 34, 90;
  --cyan-rgb:        88, 212, 249;
  --cyan-light-rgb:  138, 226, 251;
  --red-rgb:         255, 59, 47;
  --green-rgb:       63, 207, 142;
  --paper-rgb:       244, 247, 250;
  --shadow-rgb:      8, 13, 34;     /* what everything casts */
  --lamp-rgb:        112, 152, 242; /* the key light, top left */
  --lamp-mid-rgb:    60, 92, 186;
  --lamp-far-rgb:    28, 46, 112;

  /* the field: darkest at the edges, lifting through the blues */
  --navy:        #0C1433;   /* the page itself */
  --navy-lift:   #101A45;   /* a card sitting on the page */
  --blue:        #16225A;   /* a panel inside a card */
  --blue-lift:   #1E2E78;   /* the lit edge of a panel */

  /* the voice: cyan speaks, red insists */
  --cyan:        #58D4F9;   /* links, labels, the working colour */
  --cyan-light:  #8AE2FB;   /* the same voice, softer */
  --red:         #FF3B2F;   /* the one action that matters on a screen */
  --red-dark:    #E42E22;   /* that action, pressed */
  --red-soft:    #FF7A70;   /* something is wrong */
  --green:       #3FCF8E;   /* yes, done, accepted */
  --green-light: #8FF0C4;
  --paper:       #F4F7FA;   /* type on the field */
  --grey:        #7E8B95;   /* the quiet label */

  /* type at reduced strength, for the times a flat colour is too loud */
  --paper-86:  rgba(244, 247, 250, 0.86);
  --paper-72:  rgba(244, 247, 250, 0.72);
  --paper-55:  rgba(244, 247, 250, 0.55);
  --paper-35:  rgba(244, 247, 250, 0.35);

  /* the cyan line, at the four weights the site actually uses */
  --line:        rgba(88, 212, 249, 0.2);
  --line-strong: rgba(88, 212, 249, 0.3);
  --line-lit:    rgba(88, 212, 249, 0.6);
  --wash:        rgba(88, 212, 249, 0.06);

  /* corners. A card is rounder than a field; a pill is a pill */
  --r-card:  15px;
  --r-panel: 18px;
  --r-field: 13px;
  --r-mini:  11px;
  --r-pill:  999px;

  /* the glow. Nothing on this site lights up in any other way */
  --glow-cyan:  0 0 24px 4px rgba(88, 212, 249, 0.35);
  --glow-red:   0 0 24px 4px rgba(255, 59, 47, 0.3);
  /* a sponsor's colour, when one is switched on (sponsor-mode.js); the house accent otherwise */
  --sponsor:       var(--cyan);
  --sponsor-rgb:   var(--cyan-rgb);
  --sponsor-light: var(--cyan-light);
  --glow-green: 0 0 24px 4px rgba(63, 207, 142, 0.35);
  --glow-soft:  0 0 20px 3px rgba(88, 212, 249, 0.2);
  --lift:       0 24px 60px rgba(8, 13, 34, 0.65);

  /* how long anything takes to change its mind */
  --quick: 0.2s ease;
  --ease:  0.22s ease;
  --slow:  0.28s ease;

  --font: Archivo, system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}

/* ---------------------------------------------------------------------------
   2. THE GROUND
   ------------------------------------------------------------------------ */
body {
  margin: 0;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: #FFFFFF; }
a { color: var(--cyan); text-decoration: none; }

/* Keyboard users get the same glow everything else gets when it is in use. The
   outline is removed only because the glow replaces it — never leave both off. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(88, 212, 249, 0.45), 0 0 18px 3px rgba(88, 212, 249, 0.35);
}

/* THE STUDIO LIGHT
   Two lamps on every page: a key from the top left and a weaker fill from the
   bottom right. Put these two divs straight after the header, above the main
   content, and give main a z-index so the type sits in front of the light:

     <div class="lamp-key" aria-hidden="true"></div>
     <div class="lamp-fill" aria-hidden="true"></div>
*/
.lamp-key, .lamp-fill {
  position: fixed; left: 0; right: 0; z-index: 0; pointer-events: none;
}
.lamp-key {
  top: 0; height: 82vh;
  background: radial-gradient(92% 100% at 12% -8%,
    rgba(112, 152, 242, 0.44) 0%, rgba(60, 92, 186, 0.24) 34%,
    rgba(28, 46, 112, 0.09) 70%, rgba(12, 20, 51, 0) 100%);
}
.lamp-fill {
  bottom: 0; height: 64vh;
  background: radial-gradient(68% 82% at 97% 104%,
    rgba(88, 212, 249, 0.2) 0%, rgba(70, 102, 198, 0.13) 38%, rgba(12, 20, 51, 0) 100%);
}

/* ---------------------------------------------------------------------------
   3. TYPE
   ------------------------------------------------------------------------ */
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cyan);
}
.note { font-size: 13.5px; line-height: 1.65; color: rgba(244, 247, 250, 0.68); }
.label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey);
}
.label.block { display: block; margin-bottom: 8px; }
.hr { height: 1px; background: var(--line); border: none; margin: 0; }

/* ---------------------------------------------------------------------------
   4. BUTTONS
   One ladder, four rungs, and every rung lights up when the pointer is on it.

     .btn            the red one. One per screen — it is the thing to do next.
     .btn.blue       the working button: preview, copy, download, send.
     .btn.good       yes, accept, confirm.
     .btn.ghost      the quiet alternative beside a loud one.
     .btn.mini       the same button in a row of small controls.
     .btn.lg         the bigger size, for a page that is only asking one thing.
     [disabled]      there, and plainly not available.
   ------------------------------------------------------------------------ */
.btn {
  display: inline-block; box-sizing: border-box;
  padding: 14px 24px;
  border-radius: var(--r-card); border: none;
  background: var(--red); color: #FFFFFF;
  font-family: var(--font); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: background var(--ease), box-shadow var(--ease);
}
.btn:hover { background: var(--red-dark); box-shadow: var(--glow-red); }

.btn.blue { background: var(--cyan); color: var(--navy); }
.btn.blue:hover { background: var(--cyan-light); box-shadow: var(--glow-cyan); }

.btn.good { background: var(--green); color: #08301F; }
.btn.good:hover { background: var(--green-light); box-shadow: var(--glow-green); }

.btn.ghost { background: transparent; border: 1px solid var(--paper-35); color: var(--paper); }
.btn.ghost:hover { background: rgba(244, 247, 250, 0.1); box-shadow: var(--glow-soft); }

.btn.mini { padding: 9px 14px; font-size: 10px; border-radius: 10px; }
.btn.lg { padding: 16px 28px; font-size: 12.5px; }

.btn[disabled], .btn[disabled]:hover {
  opacity: 0.45; cursor: not-allowed; box-shadow: none;
}

/* The stepper: prev and next, beside a pull-down. Quieter than a .btn because
   it moves through something rather than doing something. */
.navbtn {
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid rgba(244, 247, 250, 0.22);
  background: transparent; color: rgba(244, 247, 250, 0.78);
  font-family: var(--font); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer;
  transition: border-color var(--quick), color var(--quick), box-shadow var(--quick);
}
.navbtn:hover {
  border-color: var(--line-lit); color: var(--cyan);
  box-shadow: 0 0 18px 2px rgba(88, 212, 249, 0.18);
}

/* A choice you can turn on, rather than an action you take */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--paper-86);
  font-family: var(--font); font-weight: 700; font-size: 12.5px;
  cursor: pointer; transition: all var(--quick);
}
.chip:hover { background: rgba(88, 212, 249, 0.14); }
.chip[data-on], .chip.on { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }

/* ---------------------------------------------------------------------------
   5. STATUS
   A pill states a fact. It is never a button.
   ------------------------------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid rgba(88, 212, 249, 0.4);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cyan-light);
}
.tag {
  display: inline-block; padding: 4px 10px; border-radius: 9px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.tag.new,  .tag.info { background: rgba(88, 212, 249, 0.18); color: var(--cyan-light); }
.tag.good, .tag.accepted { background: rgba(63, 207, 142, 0.18); color: var(--green-light); }
.tag.warn { background: rgba(255, 59, 47, 0.18); color: #FF9A92; }
.tag.idle, .tag.declined { background: rgba(244, 247, 250, 0.1); color: var(--paper-55); }

/* ---------------------------------------------------------------------------
   6. CARDS
   A card is a piece of the page with its own name. The header band carries the
   title on the left and whatever acts on it on the right.
   ------------------------------------------------------------------------ */
.card {
  border-radius: var(--r-card); background: var(--navy-lift);
  border: 1px solid var(--line); overflow: hidden;
}
.cardhead {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px; padding: 18px 24px;
  background: linear-gradient(90deg, rgba(88, 212, 249, 0.18), rgba(88, 212, 249, 0.05));
  border-bottom: 1px solid var(--line-strong);
}
.cardtitle { font-weight: 800; font-stretch: 112%; font-size: 20px; letter-spacing: -0.02em; }
.cardbody { padding: 20px 24px 24px 24px; }

/* One fact, labelled. Used in grids where a person is scanning for a number. */
.fact {
  padding: 12px 14px; border-radius: var(--r-mini);
  background: var(--wash); border: 1px solid rgba(88, 212, 249, 0.14);
}
.fact .k {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grey);
}
.fact .v {
  margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--paper);
  overflow-wrap: anywhere; word-break: break-word;
}

/* ---------------------------------------------------------------------------
   7. FORM FIELDS
   Every field on the site is this shape. Pull-downs are drawn over the top by
   ui-select.js and dates by ui-date.js — both copy their measurements from the
   field they replace, so they match whatever page they land on.
   ------------------------------------------------------------------------ */
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=number], select, textarea {
  width: 100%; box-sizing: border-box;
  padding: 13px 15px; border-radius: var(--r-field);
  border: 1px solid rgba(88, 212, 249, 0.28);
  background: rgba(12, 20, 51, 0.75); color: var(--paper);
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  outline: none; transition: border-color var(--quick), box-shadow var(--quick);
}
input:focus, select:focus, textarea:focus { border-color: rgba(88, 212, 249, 0.7); }
input::placeholder, textarea::placeholder { color: #66727E; }
textarea { resize: vertical; min-height: 104px; }

/* the pull-down arrow, drawn rather than the browser's */
select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2358D4F9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}

label.f {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 8px;
}
label.f .opt {
  letter-spacing: 0.04em; text-transform: none; font-weight: 500; color: var(--paper-35);
}
.hint { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: rgba(244, 247, 250, 0.45); }

/* something needs attention */
.err { border-color: rgba(255, 59, 47, 0.75) !important; }
.errmsg { margin-top: 7px; font-size: 12.5px; font-weight: 700; color: var(--red-soft); }

/* a checkbox with its words beside it, the whole thing clickable */
.check {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px;
  border-radius: 14px; border: 1px solid rgba(88, 212, 249, 0.28);
  background: rgba(12, 20, 51, 0.6); cursor: pointer;
  transition: border-color var(--quick), background var(--quick);
}
.check:hover { border-color: rgba(88, 212, 249, 0.55); background: var(--wash); }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0 0; accent-color: var(--green); cursor: pointer; }
.check .t { font-size: 14px; line-height: 1.6; color: var(--paper-86); }
