/* run.html only. Built from the tokens in site.css; nothing here is shared. */

/* The spec's headline is long: at the shared 15ch it sets on four lines and pushes the case list below the first screen. */
.hero .display { max-width: 22ch; }
.hero .lead { max-width: 58em; }
.hero { padding-top: clamp(32px, 3vw, 40px); }
.hero-shot { margin-top: 32px; }

/* Case inbox: the status column is wide enough for "Waiting for manufacturer" on one line.
   Below 620px the kit's own two-column reflow applies, so this only widens the desktop grid. */
@container (min-width: 621px) {
  .r-inbox .m-case, .r-inbox .m-list-head { grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1.4fr) 196px; }
}

/* Documents and rules side by side: the rule table fits without sideways scrolling. */
.r-pair .m-foot { justify-content: flex-start; }
.r-rules .m-table { min-width: 0; }
.r-rules .m-table th, .r-rules .m-table td { padding: 9px 10px; }
@container (max-width: 520px) {
  .r-rules .m-table th, .r-rules .m-table td { padding: 9px 8px; font-size: 13px; }
}

/* Fields read from a repair order: the value, and the line it was read from. Not in the shared kit. */
.r-fields { display: grid; }
.r-fields li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.r-fields li:first-child { border-top: 0; padding-top: 0; }
.r-fields .m-label { grid-row: span 2; padding-top: 3px; color: var(--soft); }
.r-fields b { font-weight: 500; }
.r-fields q { display: block; color: var(--soft); font: 400 12.5px/1.45 var(--mono); quotes: "\201C" "\201D"; overflow-wrap: anywhere; }
@container (max-width: 440px) {
  .r-fields li { grid-template-columns: minmax(0, 1fr); }
  .r-fields .m-label { grid-row: auto; padding-top: 0; }
}

/* The held-letter fix: the sentence, the change, and the quoted source stack with even spacing. */
#gate .m-card { display: grid; gap: 12px; }
.r-fix-t { font-size: 14px; line-height: 1.5; }
.r-diff { border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }

/* The sender's block at the top of a letter. */
.r-letterhead { color: var(--charcoal); font-weight: 500; }

/* The trace's JSON wraps, so the subject and attachments are not hidden behind a scrollbar. */
.r-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The approved menu of the exception: an icon, the action and its state in words; a locked action is dashed. */
.r-menu { display: grid; gap: 6px; }
.r-menu li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 8px 12px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 10px; font-size: 13.5px; line-height: 1.4; }
.r-menu li > i { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--soft); border-radius: 50%; font-size: 11px; line-height: 1; margin-top: 1px; }
.r-menu .is-proposed { background: var(--m-2); box-shadow: inset 3px 0 0 var(--pink); }
.r-menu .is-proposed > i { border: 1px dashed var(--cyan); color: var(--cyan); }
.r-menu .is-off { border-style: dashed; border-color: var(--soft); color: var(--soft); }
.r-menu .is-off > i { border-style: dashed; }
.r-tag { font: 500 12px/1.5 var(--mono); color: var(--soft); text-align: right; }
@container (max-width: 520px) {
  .r-menu li { grid-template-columns: 20px minmax(0, 1fr); }
  .r-tag { grid-column: 2; text-align: left; }
}

/* Calendar: seven days that carry something, so the strip spans 11 to 26 November. */
#calendar .m-ev { padding: 7px 9px; font-size: 12.5px; }
#calendar .m-ev span { font-size: 12px; }

/* A second split under the first in one section. */
.r-second { margin-top: clamp(56px, 8vw, 104px); }