/* Vibe: Wide. White ground, forest green, dusty blue. Letterspaced uppercase
   display type, hairline edges, near-square corners, and a lot of air.
   Every page loads this after styles.css, so the whole site reads from here. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Figtree:wght@400;500;600&display=swap');

:root{
  --font-heading: 'Jost', system-ui, -apple-system, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 7px;

  --color-bg: #ffffff;
  --color-surface: #f2f6f2;
  --color-text: #1d2420;

  --color-neutral-100: #fafbfa;
  --color-neutral-200: #eef1ee;
  --color-neutral-300: #dde2dd;
  --color-neutral-400: #b8c0b8;
  --color-neutral-500: #939c93;
  --color-neutral-600: #6d756e;
  --color-neutral-700: #4c534d;
  --color-neutral-800: #313733;
  --color-neutral-900: #1d2420;

  --color-accent-2: #6d96bf;
  --color-accent-2-100: #eef4fa;
  --color-accent-2-200: #dbe8f4;
  --color-accent-2-300: #bed4e9;
  --color-accent-2-400: #93b5d6;
  --color-accent-2-500: #6d96bf;
  --color-accent-2-600: #517aa4;
  --color-accent-2-700: #3f6188;
  --color-accent-2-800: #2c4562;
  --color-accent-2-900: #1c2c3f;

  --shadow-sm: 0 0 0 1px #e7ebe7;
  --shadow-md: 0 1px 3px rgba(29,36,32,.07), 0 0 0 1px #e7ebe7;
  --shadow-lg: 0 8px 26px rgba(29,36,32,.10);
}

/* Display type: page titles are wide and uppercase, section headings stay
   sentence case so teaching content keeps reading easily. */
h1{ font-weight: 300 !important; text-transform: uppercase; letter-spacing: .13em; }
h2, h3{ font-weight: 400 !important; letter-spacing: .005em; }
.bar h1{ letter-spacing: .12em; }

/* Buttons and tags carry the same letterspaced voice. */
.btn{ font-family: var(--font-heading); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; border-radius: 3px !important; }
.tag{ font-family: var(--font-heading); letter-spacing: .12em; border-radius: 3px; }

/* Fields lose the pill: this vibe is square-edged throughout. */
.input, input[type="text"], input[type="search"], input[type="url"], input[type="email"], textarea, select{ border-radius: 3px !important; }

/* Small screens: the top bar wraps, and the sheet cards never force a wider page. */
.bar{ flex-wrap: wrap; }
@media (max-width: 700px){
  .bar{ padding: 12px 16px; }
  .bar h1{ font-size: 18px; }
  .bar .sub{ display: none; }
  .wrap{ padding-left: 18px !important; padding-right: 18px !important; }
  header h1{ font-size: clamp(32px, 8.5vw, 50px) !important; }
}

html, body{ overflow-x: clip; }

/* Screen text scale is set by textsize.js (--bsp-scale). */

/* Accent: forest green, with dusty blue as the second voice. */
:root{
  --color-accent: #4a7c30;
  --color-accent-100: #f1f7ec;
  --color-accent-200: #e0eed6;
  --color-accent-300: #c5deb4;
  --color-accent-400: #9cc686;
  --color-accent-500: #74a95a;
  --color-accent-600: #5b8f42;
  --color-accent-700: #4a7c30;
  --color-accent-800: #365a24;
  --color-accent-900: #233b18;
}

/* Checkboxes and radios in the theme rather than browser blue. */
input[type="checkbox"], input[type="radio"]{ accent-color: var(--color-accent); width: 16px; height: 16px; }

/* Darker link ink: the 800 step reads as a link and passes body-text contrast. */
a{ color: var(--color-accent-800); }
a:hover{ color: var(--color-accent-900); }


/* Bar type: the page chrome matches the larger content. */
.bar h1{ font-size: 23px; }
.bar, .bar a, .bar .sub{ font-size: 16px; }
@media (max-width: 700px){
  .bar h1{ font-size: 19px; }
  .bar, .bar a{ font-size: 15px; }
}

/* Narrow desktop and tablet: the bar wraps to two rows, so keep it compact. */
@media (max-width: 980px){
  .bar{ padding-top: 10px !important; padding-bottom: 10px !important; row-gap: 8px; }
  .bar .sub{ display: none !important; }
  .bar .btn{ padding: 9px 16px !important; }
}

/* ---- Phone layout (iPhone-first) ---------------------------------------- */
html{ -webkit-text-size-adjust: 100%; }

@media (max-width: 780px){
  /* Chrome bar: title row, then a controls row that can scroll sideways if
     it ever outgrows the screen. Respects the notch and home indicator. */
  .bar{
    display: grid !important;
    grid-template-columns: 1fr;
    row-gap: 10px;
    align-items: center !important;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)) !important;
  }
  .bar-left{ align-items: center; gap: 10px; row-gap: 4px; }
  .bar-left a{ order: -1; }
  .bar h1{ font-size: 18px !important; width: 100%; }
  .bar-controls{
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .bar-controls::-webkit-scrollbar{ display: none; }

  /* Touch targets: nothing under 44px. */
  .bar .btn, .bar-controls .btn{ min-height: 44px; padding: 10px 16px !important; font-size: 15px !important; }
  .bsp-size button{ min-height: 44px; min-width: 46px !important; font-size: 19px !important; }
  .bsp-size span{ min-width: 58px !important; font-size: 13px !important; }

  /* Content: use the full width of the screen, and clear the home indicator. */
  body > div[style*="min-height:100vh"]{
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .wrap{
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  /* Cards and panels breathe less on a phone so more content fits the screen. */
  .card, section[style*="border-radius:var(--radius-lg)"]{
    padding-left: 22px !important; padding-right: 22px !important;
  }
  /* Decorative circles push layouts sideways on narrow screens. */
  header > div[style*="border-radius:50%"]{ display: none !important; }
}

/* Landscape phone: the sticky bar shouldn't eat the short screen. */
@media (max-height: 460px){
  .bar{ position: static !important; }
}

/* Bar controls: wrap rather than squeeze, so the text-size buttons can never be
   clipped by a crowded row. (bar-controls wrap) */
.bar-controls{ flex-wrap: wrap; row-gap: 8px; }
.bar-controls > *{ flex: 0 0 auto; }
.bar-controls select{ max-width: 200px; }
@media (max-width: 780px){
  .bar-controls{ flex-wrap: nowrap; }
  .bar-controls select{ max-width: min(44vw, 200px); }
}


/* ---- Air ----------------------------------------------------------------
   The vibe is mostly whitespace, so content columns get more room to
   breathe than the original tighter layout allowed. */
.wrap{ padding-top: clamp(30px, 5vw, 60px); }
.card, .card2{ padding: clamp(24px, 4vw, 38px) !important; }
p, li{ line-height: 1.7; }
blockquote{ font-weight: 300; letter-spacing: .005em; }
@media (max-width: 700px){
  .card, .card2{ padding: 22px !important; }
}


/* ---- Decoration never blocks a control -----------------------------------
   The big soft circles are drawn absolutely and can overflow their section,
   landing on top of a search field or a button. Keep them behind, and make
   them unclickable, so nothing they cross stops working. */
[style*="position:absolute"][style*="border-radius:50%"]{
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Controls and chrome sit above the decoration. */
form[role="search"],
.bar,
.bar-controls,
.sticky,
.send,
.btn,
#newstrip-wrap,
.bsp-size,
#bsp-notes-btn{
  position: relative;
  z-index: 2;
}

/* Headers that hold a circle: their words and buttons stay on top. */
header > div:not([style*="border-radius:50%"]),
header > *:not(div){
  position: relative;
  z-index: 1;
}

/* ---- Reading size -------------------------------------------------------
   One notch larger everywhere: body copy, list items and the fields people
   type into. Page-specific sizes scale from these. */
body{ font-size: 18px; }
p, li, dd, dt, td, th, label, .lede{ font-size: 1.06em; }
.input, input, textarea, select, button, .btn{ font-size: 1em; }

/* ---- Measure -------------------------------------------------------------
   The page columns are wide; running text is capped so a line stays
   comfortable to read. Anything inside a card or grid is unaffected. */
.wrap > p, .wrap > ul, .wrap > ol, .wrap > blockquote{ max-width: 72ch; }