/* Coach Kagiso — the signed-in book. Same tokens and the same two typefaces
 * as site.css; this file only adds what a place people act in needs: the
 * app header and phone tab bar, the desk, the reply on the carbon, the
 * Friday follow-up, the letters index, file editing, settings. */

/* ---------- Header and tabs ---------- */

.app-top { padding-block: 1rem; }
.app-top .in { display: flex; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; flex-wrap: wrap; }
.app-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; font-family: var(--form); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
.app-nav a { display: inline-flex; align-items: center; min-height: 3rem; color: var(--muted); text-decoration: none; }
.app-nav a:hover { color: var(--ink); }
.app-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .5em; }
.who { display: flex; align-items: center; gap: 1rem; font-family: var(--form); font-size: .8125rem; color: var(--muted); }
.chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .7rem; border: 1px dashed var(--muted); color: var(--ink); text-decoration: none; letter-spacing: .03em; }
.chip:hover { border-style: solid; }
.tabs { display: none; }

.app-foot { padding-block: 5rem 2.5rem; }
.app-foot .in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; border-top: 1px solid var(--feint); padding-top: 1.25rem; color: var(--muted); font-size: 1rem; }
.app-foot nav { display: flex; gap: 1.25rem; font-family: var(--form); font-size: .8125rem; }
.app-foot nav a { display: inline-flex; align-items: center; min-height: 3rem; }

.greet { padding-block: 2.5rem 1.5rem; }
.greet .lede { margin-top: .75rem; }

/* ---------- The desk ---------- */

.desk { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 3.5rem; align-items: start; }
.desk .main { min-width: 0; }
.aside { position: sticky; top: 1.5rem; display: grid; gap: 2rem; }
.aside h3, .kicker {
  font-family: var(--form); font-weight: 400; font-size: .8125rem; line-height: 1.25rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 .5rem;
}
.mini { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--feint); }
.mini li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .6rem; border-bottom: 1px solid var(--feint); font-size: 1rem; line-height: 1.4rem; }
.st { font-family: var(--form); font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.st.open { color: var(--margin); }
.aside p { margin: 0; font-size: 1rem; line-height: 1.5rem; }

.question.inapp { font-size: clamp(2.25rem, 4.6vw, 4rem); max-width: 14ch; }

/* Friday: the follow-up, answered in one tap. */
.will { margin-top: 2rem; max-width: 44rem; }
.will .what { margin: .25rem 0 1rem; color: var(--carbon); font-style: italic; font-size: 1.25rem; }
.choices { display: flex; flex-wrap: wrap; gap: .75rem; }
.choice {
  min-height: 3rem; padding: 0 1.25rem; border: 1px solid var(--ink); border-radius: 2px;
  background: transparent; color: var(--ink); font-family: var(--serif); font-size: 1.0625rem; cursor: pointer;
}
.choice:hover { background: var(--carbon-soft); }
.choice[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.choice:focus-visible, .linkbtn:focus-visible, .danger:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; }
.noted { font-family: var(--form); font-size: .875rem; line-height: 1.4rem; color: var(--muted); margin: .75rem 0 0; min-height: 1.4rem; }

/* The reply, written on the carbon. */
.compose { margin-top: 2.75rem; max-width: 44rem; }
.compose .leaf { margin-left: 0; }
.compose .leaf:focus-within { outline: 2px solid var(--carbon); outline-offset: 3px; }
.compose textarea {
  display: block; width: 100%; min-height: calc(var(--line) * 4); margin: 0; padding: 0; border: 0; resize: vertical;
  background: transparent; color: var(--carbon); font: italic 1.1875rem/1.75rem var(--serif);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--line) - 1px),
    var(--feint) calc(var(--line) - 1px), var(--feint) var(--line));
  background-attachment: local;
}
.compose .leaf:not(.carbon) textarea { color: var(--ink); font-style: normal; }
.compose textarea:focus-visible { outline: none; }
.compose textarea::placeholder { color: var(--muted); opacity: .7; }
.send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1rem; }
.send .btn { margin-top: 0; }
.leaf.sent { margin-top: 1.75rem; margin-left: 0; }

/* ---------- Letters index ---------- */

.index { list-style: none; margin: 0; padding: 0; max-width: 54rem; border-top: 1px solid var(--feint); }
.index a {
  display: grid; grid-template-columns: 4.5rem 8.5rem minmax(0, 1fr) 6.5rem; gap: 1.25rem; align-items: baseline;
  padding-block: 1rem; border-bottom: 1px solid var(--feint); text-decoration: none;
}
.index .no, .index .day { font-family: var(--form); font-size: .8125rem; color: var(--muted); }
.index .q { font-size: 1.1875rem; line-height: 1.6rem; }
.index .st { text-align: right; }
.index a:hover .q { text-decoration: underline; text-decoration-color: var(--margin); text-underline-offset: .22em; }
.index li.is-open .q { text-decoration: underline; text-decoration-color: var(--margin); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }

/* ---------- File editing ---------- */

.file dd.act { display: flex; gap: .25rem; }
.linkbtn {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 .5rem; border: 0; background: none; cursor: pointer;
  font-family: var(--form); font-size: .8125rem; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--feint); text-underline-offset: .25em;
}
.linkbtn:hover { color: var(--ink); text-decoration-color: currentColor; }
.file dd.gone { text-decoration: line-through; text-decoration-color: var(--margin); opacity: .55; }
.edit-line { width: 100%; min-height: 3rem; padding: 0 .6rem; border: 0; border-bottom: 2px solid var(--carbon); background: var(--carbon-soft); color: var(--carbon); font: italic 1.125rem var(--serif); }
.edit-line:focus-visible { outline: none; border-bottom-width: 3px; }
.outline {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.25rem;
  border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink);
  font-family: var(--serif); font-size: 1.0625rem; cursor: pointer; text-decoration: none;
}
.outline:hover { background: var(--carbon-soft); }

details.forget { max-width: 42rem; border-top: 2px dashed var(--feint); padding-top: 1rem; }
details.forget summary { display: inline-flex; align-items: center; min-height: 3rem; cursor: pointer; font-weight: 600; font-size: 1.125rem; color: var(--margin); list-style: none; }
details.forget summary::-webkit-details-marker { display: none; }
details.forget summary::after { content: " →"; }
details.forget[open] summary::after { content: " ↓"; }
.forget .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.danger {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.25rem; border: 1px solid var(--margin); border-radius: 2px;
  background: transparent; color: var(--margin); font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; cursor: pointer;
}
.danger:hover { background: var(--margin); color: var(--paper); }

/* ---------- Settings ---------- */

fieldset.set { border: 0; margin: 0 0 3.5rem; padding: 0; max-width: 44rem; min-width: 0; }
fieldset.set legend { font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 1.25rem; padding: 0; }
.opts { display: grid; }
.opt {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .15rem 1rem; align-items: start;
  padding: 1rem 1.25rem; border: 1px solid var(--feint); background: var(--sheet); cursor: pointer;
}
.opt + .opt { margin-top: -1px; }
.opt input { margin: .4rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--veld); }
.opt strong { font-weight: 600; font-size: 1.125rem; }
.opt span { grid-column: 2; color: var(--muted); font-size: 1rem; line-height: 1.5rem; }
.opt:has(input:checked) { border-color: var(--ink); position: relative; z-index: 1; }
.opt:has(input:focus-visible) { outline: 2px solid var(--carbon); outline-offset: 2px; }
.pair-field { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.pair-field label { font-size: 1.125rem; }
select.sel {
  min-height: 3rem; padding: 0 2.25rem 0 .9rem; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--sheet); color: var(--ink); font-family: var(--form); font-size: 1rem;
}
.hint { color: var(--muted); font-size: 1rem; margin: .75rem 0 0; }
.save { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.save .btn { margin-top: 0; }

/* ---------- Sign-in and the first letter ---------- */

.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.5rem; padding: 0 1.75rem; margin-top: 2rem;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); border-radius: 2px;
  font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; text-decoration: none;
}
.gbtn:hover { background: var(--carbon-soft); }
.gbtn b { font-family: var(--form); font-size: 1.25rem; }

.answer {
  display: block; width: 100%; min-height: calc(var(--line) * 2); margin: 0 0 var(--line); padding: 0 0 0 1rem; border: 0; border-left: 3px solid var(--carbon); resize: vertical;
  background: var(--carbon-soft); color: var(--carbon); font: italic 1.1875rem/1.75rem var(--serif);
}
.answer:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
.leaf label.open { display: block; font-size: 1.1875rem; line-height: var(--line); }

/* ---------- The letter, as it arrives by email ---------- */

.mail { max-width: 42rem; border: 1px solid var(--feint); background: var(--sheet); }
.mail-head { margin: 0; padding: 1rem 1.5rem; border-bottom: 1px solid var(--feint); display: grid; gap: .25rem; }
.mail-head div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
.mail-head dt { font-family: var(--form); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mail-head dd { margin: 0; font-size: 1rem; }
.mail-body { padding: 1.75rem 1.5rem 1.5rem; max-width: 38rem; }
.mail-body p { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.7rem; }
.mail-body .mform { font-family: var(--form); font-size: .8125rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mail-foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--feint); }
.mail-foot p { font-family: var(--form); font-size: .8125rem; line-height: 1.3rem; color: var(--muted); margin: 0 0 .5rem; }

/* ---------- Signed out ---------- */

/* Until sign-in settles, the book's own navigation has nowhere to go. */
body[data-page]:not(.signed-in) .app-nav,
body[data-page]:not(.signed-in) .tabs,
body[data-page]:not(.signed-in) .who { display: none; }

/* The gap between the page arriving and Firebase saying who is here. Neither
 * state is shown in it, so a reload goes quiet-then-book rather than
 * sign-in-then-book. Only the script sets .booting, and it removes it the
 * moment it knows — so a page whose script is blocked shows the sign-in
 * block as before rather than nothing at all. */
body.booting #signed-out { display: none !important; }

/* And when the crumb says somebody was signed in here, the book's own frame
 * is what fills that gap, held back a little until the letters arrive. */
body.booting.expecting #app { opacity: .5; }
body:not(.booting) #app { opacity: 1; transition: opacity .18s ease-out; }
@media (prefers-reduced-motion: reduce) { body:not(.booting) #app { transition: none; } }

/* ---------- The desk ---------- */

.index li .choices { padding: .5rem 0 1rem; }

/* The year of Friday questions: a numbered row, the box that holds what goes
 * out, and the default underneath when the desk has written over it. */
.questions li { padding-block: 1rem; border-bottom: 1px solid var(--feint); }
.questions .qhead { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.questions .hint { margin: .5rem 0 0; }
.desk-fields .kicker { display: block; margin-top: 1rem; }
.desk-fields .edit-line { font-style: normal; color: var(--ink); background: transparent; }

/* ---------- Phone ---------- */

@media (max-width: 760px) {
  .app-nav { display: none; }
  .book.app { padding-bottom: 4.5rem; }
  .tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    background: var(--sheet); border-top: 1px solid var(--feint);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabs a {
    display: flex; align-items: center; justify-content: center; min-height: 3.5rem;
    font-family: var(--form); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted); text-decoration: none; text-align: center;
  }
  .tabs a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); }
  .who .name { display: none; }
  .greet { padding-block: 1.25rem 1rem; }
  .desk { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .aside { position: static; }
  .index a { grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .75rem; }
  .index .q { grid-column: 1 / -1; grid-row: 2; }
  .index .st { grid-column: 3; grid-row: 1; }
  .opt { padding: .9rem 1rem; }
  .mail-head, .mail-body { padding-inline: 1rem; }
  .mail-head div { grid-template-columns: 4.25rem minmax(0, 1fr); gap: .5rem; }
  .app-foot { padding-block: 3.5rem 1.5rem; }
}