/* Email link landings (spec/page-email-landings.md): #unsubscribe, #standing, #club-claim in the sign-in frame.
   Sign in's .si frame (dibs.css) with a wider column: V479 (one object, one question, one action), AB604 (scope
   said before the button, the way back as a quiet text action), SE372 (dead link), CA562 (done), CA634 (answer rows). */
.el-col { width: 440px; max-width: calc(100% - 2 * var(--s-4)); margin: 136px auto 0; }
.el-col.el-wide { width: 560px; }
.el-col h1 { margin: 0; text-wrap: balance; }
.el-col h1:focus { outline: none; }
.el-lead { margin: var(--s-2) 0 0; font: var(--t-body); color: var(--ink-2); }
.el-note { margin: var(--s-4) 0 0; font: var(--t-meta); color: var(--ink-2); }
.el-note-sm { margin-top: var(--s-3); font: var(--t-label); font-weight: 400; color: var(--muted); }
.el-from { margin: 0 0 var(--s-2); font: var(--t-label); font-weight: 400; color: var(--muted); }

/* the object: the class, the switch or the club the link is about (V479's avatar, made a fact) */
.el-obj { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-6); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.el-obj-t { min-width: 0; flex: 1; }
.el-obj-name { margin: 0; font: var(--t-item); color: var(--ink); overflow-wrap: anywhere; }
.el-obj-sub { margin: 2px 0 0; font: var(--t-meta); color: var(--ink-2); }
.el-obj-st { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font: var(--t-label); color: var(--ink-2); }
.el-obj-st .icon { width: 14px; height: 14px; }
.el-code { flex-shrink: 0; padding: 2px var(--s-2); border-radius: var(--r-control); background: var(--surface-2); font: var(--t-label); color: var(--ink); white-space: nowrap; }
.el-ico { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r-control); background: var(--surface-2); color: var(--ink-2); }
.el-ico .icon { width: 18px; height: 18px; }
.el-is-done .el-obj { margin: var(--s-6) 0 0; }
/* Done reads mark, outcome title, the notice, the object as it now stands, a hairline, then the one way on (CA562).
   The mark stays on the column's left edge with the title it heads: the column is left aligned (system: paragraphs are
   never centred), and a centred mark over a left-aligned title read as two alignments (check 0 minor 2, brief 3). */
.el-is-done .el-next { padding-top: var(--s-6); border-top: 1px solid var(--line); }

/* the mark above a done or dead-link title (CA562, SE372): an outline icon in a soft circle, never a logo */
.el-mark { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 0 var(--s-4); border-radius: var(--r-pill); }
.el-mark .icon { width: 20px; height: 20px; }
.el-mark-done { background: var(--positive-subtle); color: var(--positive); }
.el-mark-bad { background: var(--warning-subtle); color: var(--warning); }

/* one action, then the way back as a quiet text link (AB604, LI4) */
.el-act { margin-top: var(--s-6); }
.el-act .field-error:empty, .el-ch-err:empty { display: none; }
.el-act .field-error .icon, .el-ch-err .icon { width: 14px; height: 14px; flex-shrink: 0; }
.el-next { margin-top: var(--s-6); }
.el-col .el-ter { display: inline-flex; margin-top: var(--s-4); font: var(--t-control); }

/* Which year are you? (CA634: the answers as large bordered rows in one card, one column) */
.el-onfile { margin: var(--s-4) 0 0; font: var(--t-meta); color: var(--ink-2); }
.el-group { margin: var(--s-6) 0 var(--s-2); font: var(--t-label); color: var(--muted); }
.el-choices { display: grid; gap: var(--s-2); }
button.el-choice { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4); border-radius: var(--r-panel); text-align: left; background: var(--surface); }
button.el-choice:hover { background: var(--surface); border-color: var(--ink-2); }
button.el-choice.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
button.el-choice:disabled { cursor: default; opacity: .6; }
.el-choice-t { display: grid; gap: 2px; min-width: 0; }
.el-choice-l { font: var(--t-item); color: var(--ink); }
.el-choice-d { font: var(--t-meta); color: var(--ink-2); }
.el-choice-chev { color: var(--muted); flex-shrink: 0; }
.el-choice-chev .icon { width: 16px; height: 16px; }
.el-choice-mine { flex-shrink: 0; font: var(--t-label); color: var(--accent); }
.el-ch-err { margin-top: var(--s-3); }
.el-busy { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: var(--t-meta); color: var(--ink-2); }
.el-busy:empty { display: none; }
.el-busy:not(:empty) { margin-top: var(--s-3); }
.el-busy .spinner { width: 16px; height: 16px; }

.el-sec { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.el-sec h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font: var(--t-item); }
.el-count { padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--surface-2); font: var(--t-label); color: var(--ink-2); }
.el-hint { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.el-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-3); }
.el-cmp > div { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.el-cmp h3 { margin: 0 0 4px; font: var(--t-label); color: var(--ink); }
.el-cmp p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.el-quote { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-4); border-left: 3px solid var(--line-strong); font: var(--t-meta); color: var(--ink); }
.el-src { margin: var(--s-2) 0 0; font: var(--t-small); font-weight: 400; color: var(--muted); }
.el-wlist { list-style: none; margin: var(--s-3) 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.el-wlist li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: var(--s-2) var(--s-4); font: var(--t-meta); }
.el-wlist li + li { border-top: 1px solid var(--line); }
.el-wlist li span { color: var(--warning); font: var(--t-label); white-space: nowrap; }
.el-notnow { margin: var(--s-6) 0 0; font: var(--t-control); }
.el-fine { margin: var(--s-4) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* the sample line sits first in the frame's footer (the shell's sample bar is hidden in body.bare) */
/* Resume alerts in the Watching drawer's Holds row (watching.js), for a watch paused from an alert email */
.props .w-resume { min-height: 28px; margin: -4px 0 -4px calc(-1 * var(--s-2)); padding: 4px var(--s-2); font: var(--t-meta); font-weight: 500; }

.el .si-foot .el-sample { flex-basis: 100%; margin: 0 0 var(--s-2); text-align: center; }

@media (max-width: 599px) {
  .el-col, .el-col.el-wide { width: auto; max-width: none; margin: 64px var(--s-4) 0; }
  .el-act .el-go, .el-next .btn { display: flex; width: 100%; }
  .el-cmp { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  .el-obj { padding: var(--s-3); }
  /* the code chip and the state share the first line; the course title takes the full width under them (nit 4) */
  .el-obj:has(> .el-code) { flex-wrap: wrap; row-gap: var(--s-1); }
  .el-obj:has(> .el-code) .el-obj-st { order: 1; margin-left: auto; }
  .el-obj:has(> .el-code) .el-obj-t { order: 2; flex-basis: 100%; }
  button.el-choice { align-items: flex-start; }
  .el-choice-chev { margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .el-mark-done { transform: none !important; }
}
/* Alert preferences: the links to the email landings sit between two settings sections, so they carry the 40px
   section gap that .set-sec + .set-sec would have given (check 1 round 2: the next heading touched the line) */
.settings-col .ap-links { margin: var(--s-3) 0 40px; }