/* =====================================================================
   AI-Native Web Development, Hands-On: this guide's additions
   ---------------------------------------------------------------------
   Loaded after shared.css on every page. Sizes in rem (1rem = 20px);
   no inline styles in the pages, every component has a class here.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Accessibility fixes to the Pristina tokens.
      Measured against WCAG AA (4.5:1 for normal text):
      - Google blue #4285F4 on white is 3.6:1, so links and buttons use
        #1967D2 (5.4:1 on white, 4.7:1 on --blue-bg).
      - --yellow-text #B06000 on --yellow-bg was 4.3:1; now 6.3:1.
      - --green-text #1E8E3E on --green-bg was 3.7:1; now 5.2:1.
      - Sidebar numbers in --grey-500 were 2.5:1; now --grey-700.
   --------------------------------------------------------------------- */
:root {
  --link:        #1967D2;
  --link-hover:  #185ABC;
  --yellow-text: #8C4A00;
  --green-text:  #137333;
}
a { color: var(--link); }
a.glossary-link:hover { color: var(--link); border-bottom-color: var(--link); }
.btn--primary { background: var(--link); color: #fff; }
.btn--primary:hover { background: var(--link-hover); }
.btn--ghost { color: var(--link); }
.tab-btn[aria-selected="true"] { color: var(--link); border-bottom-color: var(--link); }
.agenda-cell h3 a:hover { color: var(--link); }
.sidebar-section a .num { color: var(--grey-700); }
.sidebar a[aria-current="page"] .num { color: var(--blue-text); }

/* Copy buttons stay visible: beginners should not have to hover to find
   them. They sit in a band above the text, so a long command that scrolls
   sideways never runs underneath the button. */
.code-block { padding-top: 2.6rem; }
.code-block .copy-btn {
  opacity: 1;
  top: 0.45rem;
  right: 0.5rem;
  font-size: 0.8rem;
}

kbd {
  display: inline-block;
  padding: 0.05em 0.4em;
  border: 1px solid var(--grey-300);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--grey-900);
  font-size: 0.85em;
  line-height: 1.4;
}


/* ---------------------------------------------------------------------
   2. Lede on pages without a hero
   --------------------------------------------------------------------- */
.content > .lede {
  font-size: 1.1rem;
  color: var(--grey-700);
  max-width: 640px;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}


/* ---------------------------------------------------------------------
   3. Landing page
   --------------------------------------------------------------------- */
.hero--landing { padding: 2.5rem 0 0.5rem; }
.hero--landing .lede { font-size: 1.2rem; margin-bottom: 0.5rem; }
.home-section-heading { margin-top: 3rem; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.75rem;
}
.agenda-cell p + p { margin-top: 0.3rem; }
/* shared.css gives every td a bottom border; in the agenda the row has one,
   and on phones the cell borders showed as stray lines. */
.agenda td { border-bottom: none; }


/* ---------------------------------------------------------------------
   4. Block facts: Role, outcome, time box at the top of a Block page
   --------------------------------------------------------------------- */
.block-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}
.block-facts > div {
  background: var(--surface-alt);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}
.block-facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-700);
  font-weight: 500;
}
.block-facts dd {
  margin: 0.2rem 0 0;
  font-weight: 500;
  color: var(--grey-900);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .block-facts { grid-template-columns: 1fr; gap: 0.4rem; }
  .block-facts > div {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
  }
  .block-facts dt { flex: 0 0 5.5rem; }
  .block-facts dd { margin: 0; }
}


/* ---------------------------------------------------------------------
   5. Where to type: agent chat, terminal or Stitch.
      Prompts get a light block, terminal commands the dark one, so the
      two never look alike.
   --------------------------------------------------------------------- */
.where {
  margin: 1.25rem 0 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--grey-700);
}
.where--chat { color: var(--link); }
.where + pre { margin-top: 0; }

.code-block--prompt {
  background: var(--blue-bg);
  color: var(--grey-900);
  border: 1px solid #C6DAFC;
}
.code-block--prompt .copy-btn {
  background: var(--surface);
  color: var(--link);
  border-color: #A8C7FA;
}
.code-block--prompt .copy-btn:hover {
  background: var(--surface);
  color: var(--link-hover);
  border-color: var(--link);
}

/* Prompts and outputs are prose: they wrap. Terminal commands stay on one
   line, so it is clear they are one command. */
.code-block--prompt,
pre.output-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* What a command prints: no copy button, never mistaken for a command. */
pre.output-block {
  background: var(--surface-alt);
  color: var(--grey-900);
  border: 1px dashed var(--grey-300);
  font-size: 0.8rem;
  padding-right: 1.15rem;
}
.output-label {
  margin: 1.25rem 0 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--grey-700);
}
.output-label + pre { margin-top: 0; }

@media (max-width: 600px) {
  .tab-panel { padding: 1rem; }
}


/* ---------------------------------------------------------------------
   6. Callouts of this guide: the mistake of the Block
   --------------------------------------------------------------------- */
.callout--mistake {
  border-left-color: var(--google-red);
  background: var(--red-bg);
}
.callout--mistake > strong:first-child { color: var(--red-text); }


/* ---------------------------------------------------------------------
   7. Labelled checklists (READ-DO, DO-CONFIRM)
   --------------------------------------------------------------------- */
.checklist-kind {
  margin: 1rem 0 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--grey-700);
}
ul.checklist {
  list-style: none;
  margin-left: 0;
}
ul.checklist > li {
  position: relative;
  padding-left: 1.75rem;
}
ul.checklist > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--grey-700);
  border-radius: 4px;
}


/* ---------------------------------------------------------------------
   8. Two-column comparison (good / bad pair)
   --------------------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}
.compare > div {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  background: var(--surface-alt);
}
.compare > .compare-bad { border-top: 4px solid var(--google-red); }
.compare > .compare-good { border-top: 4px solid var(--google-green); }
.compare h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.compare p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .compare { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
   9. Two-column rows: the map of the day, the checkpoint list
   --------------------------------------------------------------------- */
.pair-list {
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.pair-list > li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.pair-list .pair-key { font-weight: 500; color: var(--grey-900); }
.pair-list .pair-value { color: var(--grey-900); }
@media (max-width: 600px) {
  .pair-list > li { grid-template-columns: 1fr; gap: 0.2rem; }
}


/* ---------------------------------------------------------------------
   10. The cheat sheet of the seven mistakes
   --------------------------------------------------------------------- */
.mistakes {
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
  counter-reset: mistake;
  display: grid;
  gap: 0.75rem;
}
.mistakes > li {
  counter-increment: mistake;
  position: relative;
  margin: 0;
  padding: 1rem 1.25rem 1rem 3.6rem;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-left: 4px solid var(--google-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mistakes > li::before {
  content: counter(mistake);
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--red-bg);
  color: var(--red-text);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mistakes h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.mistakes p { margin: 0 0 0.35rem; }
.mistakes p:last-child { margin-bottom: 0; }
.mistakes .taught { color: var(--grey-700); font-size: 0.9rem; }


/* ---------------------------------------------------------------------
   11. Glossary (moved from the Pristina page's own <style>)
   --------------------------------------------------------------------- */
.glossary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 720px) {
  .glossary { grid-template-columns: 1fr; }
}
.glossary-card {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem 1.15rem;
  box-shadow: var(--shadow-card);
}
.glossary-card:target {
  border-color: var(--link);
  box-shadow: 0 0 0 2px var(--blue-bg), var(--shadow-card);
}
.glossary-card dt {
  font-family: 'Google Sans Display', 'Google Sans', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--grey-900);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.glossary-card dd {
  margin: 0;
  color: var(--grey-900);
  font-size: 0.95rem;
  line-height: 1.55;
}


/* ---------------------------------------------------------------------
   12. About the instructor (moved from the Pristina page's own <style>)
   --------------------------------------------------------------------- */
.instructor-header {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
}
.instructor-photo {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
}
.instructor-headline { flex: 1 1 280px; }
.instructor-name {
  font-family: 'Google Sans Display', 'Google Sans', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
  color: var(--grey-900);
}
.instructor-role { color: var(--grey-700); margin: 0 0 0.75rem; }
.instructor-links {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.instructor-links li { margin: 0; }


/* ---------------------------------------------------------------------
   13. Section counter on phones: the segments get a row of their own,
       instead of squeezing under the Reset button.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  .steps-counter { flex-wrap: wrap; row-gap: 0.5rem; }
  .steps-counter-segments { order: 3; flex: 1 1 100%; }
  .steps-counter-reset { margin-left: auto; }
}


/* ---------------------------------------------------------------------
   14. A step skipped with "Next →" shows amber, not red: red read as an
       error to beginners, and skipping a step is allowed.
   --------------------------------------------------------------------- */
.steps-counter-segments .seg.is-passed { background: #F9AB00; }


/* ---------------------------------------------------------------------
   15. "Pick your system" above OS tabs, and the minute offsets in the
       run of show
   --------------------------------------------------------------------- */
.tabs-label {
  margin: 1.25rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--grey-700);
}
.tabs-label + .tabs { margin-top: 0; }
.agenda-time .agenda-offset {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--grey-700);
  white-space: nowrap;
}


/* ---------------------------------------------------------------------
   15. The bar shows where you are, not what you ticked (2026-10-07):
       steps behind you light blue, the current one blue. The help cards
       ("If something goes wrong", "Fell behind?") are linked in the header.
   --------------------------------------------------------------------- */
.steps-counter-segments .seg.is-before { background: #AECBFA; }
.steps-counter-segments .seg.is-current { background: var(--google-blue); box-shadow: none; }
.wiz-help { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1rem; }
.wiz-help-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}
.wiz-help-link:hover { color: var(--link-hover); }


/* ---------------------------------------------------------------------
   16. Feedback form on page 8 (2026-10-07). The answers go from the guide
       straight to the event's Google Form; feedback.js sends them.
   --------------------------------------------------------------------- */
.fb-form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.fb-question {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem 1.15rem;
  margin: 0;
  background: var(--surface);
}
.fb-legend { font-weight: 600; color: var(--grey-900); padding: 0 0.4rem; font-size: 1.02rem; line-height: 1.45; }
.fb-optional { font-weight: 400; color: var(--grey-700); font-size: 0.9rem; }
.fb-hint { margin: 0.35rem 0 0.5rem; color: var(--grey-700); font-size: 0.93rem; line-height: 1.5; }
.fb-other { align-items: center; flex-wrap: wrap; }
.fb-other .quiz-option-text { flex: 0 0 auto; }
.fb-other-text, .fb-text {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
}
.fb-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.4rem;
  min-height: 6rem;
  font: inherit;
  line-height: 1.5;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.fb-form textarea:focus, .fb-other-text:focus, .fb-text:focus { outline: 2px solid var(--google-blue); outline-offset: 1px; }
.fb-scale { margin-top: 0.5rem; }
.fb-scale-options { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 0.3rem; }
.fb-scale-option { position: relative; display: block; cursor: pointer; }
.fb-scale-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fb-scale-option span {
  display: block;
  padding: 0.5rem 0;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
  color: var(--grey-900);
}
.fb-scale-option:hover span { background: var(--surface-alt); }
.fb-scale-option input:checked + span { background: var(--google-blue); border-color: var(--google-blue); color: #fff; }
.fb-scale-option input:focus-visible + span { outline: 2px solid var(--google-blue); outline-offset: 2px; }
.fb-scale-ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-size: 0.88rem; color: var(--grey-700); }
.fb-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fb-error { margin: 0; color: var(--red-text); font-weight: 500; }
/* A required question still unanswered when Send is pressed. */
.fb-question.is-missing { border-color: var(--google-red); box-shadow: 0 0 0 1px var(--google-red); }
.fb-missing-note { margin: 0.2rem 0 0.4rem; color: var(--red-text); font-size: 0.93rem; font-weight: 500; }
.fb-done { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-md); }
.fb-done { background: var(--green-bg); }
.fb-done:focus { outline: none; }
.fb-done h2 { margin-top: 0; }
@media (max-width: 560px) {
  .fb-scale-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   17. A compact menu (2026-10-07): the whole sidebar, three headings and
       nineteen links, fits a MacBook screen without scrolling. The guide's
       base font is 20px, and the general list and heading spacing no
       longer applies inside the menu.
   --------------------------------------------------------------------- */
.sidebar { padding: 0.9rem 0.75rem 0.75rem; }
.sidebar-header { padding: 0 0.5rem 0.5rem; margin-bottom: 0.5rem; }
.sidebar-header .eyebrow { margin-bottom: 0.1rem; }
.sidebar-header h2 { margin: 0; font-size: 0.95rem; line-height: 1.25; }
.sidebar-nav { gap: 0.4rem; }
.sidebar-section h3 { margin: 0.6rem 0 0.15rem; font-size: 0.65rem; }
.sidebar-section:first-child h3 { margin-top: 0; }
.sidebar-section ul { margin: 0; padding: 0; }
.sidebar-section li { margin: 0; }
.sidebar-section a { padding: 0.14rem 0.6rem; font-size: 0.8rem; line-height: 1.2; }
.sidebar-section a:hover { text-decoration: none; background: var(--grey-200); }