/* =========================================================================
   ACCOUNTS LITE: Try It, Your learning, My Work, the pathway (2026-10-12).
   Builds on the lesson exercise (exercise.css, .lsn-ex); house tokens only.
   Prefixes: ti- (Try It), lw- (learn work pages).
   ========================================================================= */
.ti-quiet { font: var(--t-sm)/1.5 var(--ui); color: var(--ink-3); }
.lsn-ex__h .ti-quiet { margin-left: var(--s2); font-weight: 400; letter-spacing: 0; }
.ti-where { margin: 0 0 var(--s3); font: var(--t-sm)/1.4 var(--mono); color: var(--ink-2); }
.ti-where a, .ti-quiet a, .lw a:not(.btn) { color: var(--ink); }
.ti-objective { margin: 0 0 var(--s6); max-width: 60ch; font: 600 var(--t-md)/1.4 var(--ui); color: var(--ink); }
.ti-objective span { display: block; margin-bottom: var(--s1); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }

.ti-part { padding: var(--s6) 0; border-top: 1px solid var(--rule); max-width: 52rem; }
.ti-tag { margin: 0 0 var(--s4); font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .02em; color: var(--brand); }
.ti-prompt { margin: 0 0 var(--s4); padding: 0; font: 650 var(--t-base)/1.45 var(--ui); color: var(--ink); }
.ti-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.ti-opt { display: flex; gap: var(--s3); align-items: flex-start; min-height: 2.75rem; padding: var(--s2) 0; font: var(--t-base)/1.45 var(--ui); color: var(--ink); cursor: pointer; }
.ti-opt input, .ti-chip input { flex: none; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--brand); }
.ti-fb { margin: 0 0 var(--s3) calc(1.15rem + var(--s3)); padding: var(--s2) var(--s3); border-left: 2px solid var(--rule-firm); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.ti-fb.is-right { border-left-color: var(--brand); color: var(--ink); }
.ti-fb[data-pre]::before { content: attr(data-pre); font-weight: 650; color: var(--ink); }
.ti-sort__item { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; }
.ti-sort__item legend { padding: 0; margin-bottom: var(--s2); font: var(--t-base)/1.45 var(--ui); color: var(--ink); }
.ti-sort__choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ti-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: 0 var(--s4); border: 1px solid var(--rule-firm); background: var(--paper); font: var(--t-sm)/1 var(--ui); color: var(--ink); cursor: pointer; }
.ti-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.ti-chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.ti-sort .ti-fb { margin-left: 0; margin-top: var(--s2); }
.ti-btn { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--s3); padding: 0 var(--s5); background: var(--ink); color: var(--paper); border: 0; font: 650 var(--t-sm)/1 var(--ui); cursor: pointer; }
.ti-btn:hover { background: var(--brand); }
.ti-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ti-result { min-height: 1.5em; margin: var(--s3) 0 0; font: 650 var(--t-sm)/1.5 var(--ui); color: var(--ink); }
.ti-key, .ti-hint { margin-top: var(--s3); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.ti-key summary, .ti-hint summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.ti-key ul, .ti-hint ul { margin: var(--s2) 0; padding-left: var(--s5); }
.ti-key[hidden] { display: none; }

.ti-instr { margin: 0 0 var(--s3); max-width: 60ch; font: var(--t-base)/1.5 var(--ui); color: var(--ink); }
.ti-out { margin: 0 0 var(--s4); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.ti-out span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); margin-right: var(--s2); }
.ti-note { margin: 0 0 var(--s4); padding: var(--s2) var(--s3); border-left: 2px solid var(--brand); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); max-width: 60ch; }
.ti-field { margin: 0 0 var(--s5); }
.ti-label { display: block; margin: 0 0 var(--s2); font: 600 var(--t-sm)/1.4 var(--ui); color: var(--ink); }
.ti-field textarea, .lw-text { display: block; width: 100%; box-sizing: border-box; min-height: 4.5rem; padding: var(--s3); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-firm); font: var(--t-base)/1.5 var(--ui); resize: vertical; }
.ti-rows-wrap { overflow-x: auto; }
.ti-rows { width: 100%; border-collapse: collapse; font: var(--t-sm)/1.4 var(--ui); }
.ti-rows th { padding: var(--s2); text-align: left; font: 500 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); border-bottom: 1px solid var(--rule-firm); vertical-align: bottom; }
.ti-rows td { padding: var(--s1); border-bottom: 1px solid var(--rule); vertical-align: top; }
.ti-rows input, .ti-rows select, .lw-input { width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: 0 var(--s2); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-firm); font: var(--t-sm)/1.3 var(--ui); }
.ti-rows input:focus-visible, .ti-rows select:focus-visible, .lw-input:focus-visible, .ti-field textarea:focus-visible, .lw-text:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.ti-rows td { min-width: 8rem; }
.ti-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; background: none; border: 0; color: var(--ink); font: var(--t-sm)/1 var(--ui); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.ti-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.ti-foot { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule-firm); }
.ti-save, .lw-save { margin: 0 0 var(--s4); font: var(--t-sm)/1.5 var(--mono); color: var(--ink-2); }
.ti-save[data-state="error"], .ti-save[data-state="ended"], .lw-save[data-state="error"], .lw-save[data-state="ended"] { color: var(--ink); font-weight: 650; }
.ti-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.ti-actions__note { flex-basis: 100%; margin: 0; }
.ti-actions .btn[disabled] { opacity: .7; cursor: default; }
.ti-conflict { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); background: var(--paper-3); border-left: 2px solid var(--brand); font: var(--t-sm)/1.5 var(--ui); color: var(--ink); }
.ti-conflict p { margin: 0 0 var(--s2); }
.ti-conflict pre { white-space: pre-wrap; font: var(--t-xs)/1.5 var(--mono); }

/* ---------- learn work pages ---------- */
.lw { max-width: 60rem; }
.lw-panel, .lw-phase { margin: 0 0 var(--s8); }
.lw-phase { padding-top: var(--s6); border-top: 2px solid var(--ink); }
.lw-phase--later { border-top-width: 1px; border-top-color: var(--rule-firm); }
.lw-phase__head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; }
.lw-h3 { margin: 0 0 var(--s2); font: 650 var(--t-md)/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.lw-sec { padding: var(--s5) 0; border-top: 1px solid var(--rule); max-width: none; }
.lw-deliv { margin: var(--s2) 0 var(--s4); font: var(--t-base)/1.5 var(--ui); color: var(--ink-2); max-width: 60ch; }
.lw-makes { margin: 0 0 var(--s3); padding-left: var(--s5); font: var(--t-sm)/1.6 var(--ui); color: var(--ink-2); }
.lw-chip { display: inline-block; padding: .2rem .55rem; border: 1px solid var(--rule-firm); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }
.lw-chip--in_progress { border-color: var(--brand); color: var(--brand); }
.lw-chip--done, .lw-chip--skipped { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); max-width: 46rem; }
.lw-grid__wide { grid-column: 1 / -1; }
.lw-form { display: grid; gap: var(--s2); max-width: 26rem; margin: var(--s4) 0; }
.lw-form .btn { justify-self: start; margin-top: var(--s2); cursor: pointer; }
.lw-input--code { max-width: 10rem; font: 600 var(--t-md)/1 var(--mono); letter-spacing: .2em; }
.lw-msg { min-height: 1.5em; font: 600 var(--t-sm)/1.5 var(--ui); color: var(--ink); }
.lw-note { padding: var(--s3) var(--s4); background: var(--paper-deep); border-left: 2px solid var(--brand); font: var(--t-sm)/1.5 var(--ui); color: var(--ink); }
/* Who you are and the way out, together at the top of Your learning (Annie's walkthrough, 2026-10-13: sign-out was buried
   at the bottom under "Your data"). Wraps under the email on narrow screens. */
.lw-who { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; padding: 0 0 var(--s4); border-bottom: 1px solid var(--rule); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.lw-who p { margin: 0; overflow-wrap: anywhere; }
.lw-who .btn { cursor: pointer; }
/* Outline buttons that are <button>s (Sign out, Delete, Send a new link, My Work's copy and download) keep the browser's
   grey fill unless told otherwise; links styled .btn don't have one. */
.lw button.btn:not(.btn--primary) { background: transparent; }
.lw button.btn:not(.btn--primary):hover:not([disabled]) { background: var(--brand-wash); }
.lw-device { margin: var(--s4) 0; padding: var(--s4); background: var(--paper-deep); border-left: 2px solid var(--brand); }
.lw-resume p { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; font: var(--t-base)/1.5 var(--ui); }
.lw-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: var(--s4) 0; border-top: 2px solid var(--ink); }
.lw-counts > div { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--rule); }
.lw-counts dt { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.lw-counts dd { margin: var(--s1) 0 0; font: 650 var(--t-lg)/1.2 var(--display); color: var(--ink); }
.lw-plist, .lw-actions { margin: 0 0 var(--s5); padding-left: var(--s5); font: var(--t-base)/1.9 var(--ui); }
.lw-actions { list-style: none; padding: 0; }
.lw-path { font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.lw-danger { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); font: var(--t-sm)/1.5 var(--ui); max-width: 34rem; }
.lw-danger summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
.lw-danger .lw-input { max-width: 14rem; margin-bottom: var(--s3); display: block; }
.lw-danger .btn { cursor: pointer; }
.lw-danger .btn[disabled] { opacity: .5; cursor: not-allowed; }
.lw-export { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: var(--s5) 0 var(--s2); }
.lw-export .btn, .lw-phase .btn { cursor: pointer; background: none; }
.lw-export .btn--primary { background: var(--ink); }
.lw-about p { margin: 0 0 var(--s1); font: var(--t-sm)/1.5 var(--ui); color: var(--ink); }
.lw-example { margin-top: var(--s5); font: var(--t-sm)/1.55 var(--ui); color: var(--ink-2); }
.lw-example summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.lw-ex h4 { margin: var(--s4) 0 var(--s1); font: 650 var(--t-sm)/1.3 var(--ui); color: var(--ink); }
.lw-steps { list-style: none; margin: var(--s6) 0; padding: 0; border-top: 2px solid var(--ink); }
.lw-step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.lw-step__n { font: 500 var(--t-md)/1.3 var(--mono); color: var(--brand); }
.lw-step__t { font: 650 var(--t-md)/1.3 var(--display); color: var(--ink); }
.lw-step p { margin: var(--s1) 0 0; }
.lw-step__m { font: var(--t-xs)/1.6 var(--mono); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* Phones: the rows table becomes one card per row, each cell labelled. */
@media (max-width: 40rem) {
  .ti-rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ti-rows, .ti-rows tbody, .ti-rows tr, .ti-rows td { display: block; width: 100%; }
  .ti-rows tr { margin-bottom: var(--s4); padding: var(--s3); border: 1px solid var(--rule-firm); box-sizing: border-box; }
  .ti-rows td { border: 0; padding: var(--s1) 0; min-width: 0; }
  .ti-rows td::before { content: attr(data-label); display: block; margin-bottom: var(--s1); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
  .lw-grid, .lw-counts { grid-template-columns: minmax(0, 1fr); }
  .ti-fb { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ti-chip, .ti-btn { transition: none; } }

/* `.ia a { color: inherit }` (ia.css) outranks `.btn--primary`, which left the primary link-buttons' text the
   colour of their own background. Restore the house button colours inside these pages. */
.lw a.btn--primary, .ti a.btn--primary { color: var(--paper); }
.lw a.btn--primary:hover, .ti a.btn--primary:hover { color: #fff; }
/* Rhythm on Your learning: the house scale only (s4 / s6 / s8). */
.lw-panel > .lc-h2 { margin: var(--s8) 0 var(--s4); }
.lw-resume { margin: var(--s4) 0 0; }
.lw-panel > p:has(> .btn) { margin: var(--s6) 0 0; }
.ti-rows tr[hidden] { display: none !important; }
.lw-phase--later { margin: 0; padding: 0; }
.lw-phase--later > summary { list-style: none; cursor: pointer; min-height: 2.75rem; padding: var(--s4) 0; align-items: center; }
.lw-phase--later > summary::-webkit-details-marker { display: none; }
.lw-phase--later > summary .lc-h2 { margin: 0; font-size: var(--t-lg); }
.lw-phase--later > summary::after { content: "+"; margin-left: auto; font: 400 var(--t-lg)/1 var(--mono); color: var(--ink-3); }
.lw-phase--later[open] > summary::after { content: "–"; }
.lw-phase--later[open] { padding-bottom: var(--s5); }
.lw-phase--later + .lw-phase:not(.lw-phase--later) { margin-top: var(--s8); }