/* ==========================================================================
   Input Apps: the base stylesheet (#677). Consumes inputs-tokens.css.
   Everything a staff Input App is made of: the shell strip, the scope chips,
   the inbox cards and receipts, the focused entry, the primary action, the
   status chip, the Setup rail and data-model table, skeletons.
   Rules: targets 44px (primary 52px); state never by colour alone; focus
   visible; motion on the shared tokens only; no kicker labels; no toasts.
   ========================================================================== */
.favor-inputs { background: var(--in-bg); color: var(--in-ink); font-family: var(--in-font-body); font-size: var(--in-size-md); line-height: 1.4; -webkit-font-smoothing: antialiased; min-height: 80vh; display: flex; flex-direction: column; border: 0; border-radius: 0; }
.favor-inputs *, .favor-inputs *::before, .favor-inputs *::after { box-sizing: border-box; }
.favor-inputs ::selection { background: var(--in-accent-wash); color: var(--in-ink); }
.favor-inputs button, .favor-inputs input, .favor-inputs select { font: inherit; color: inherit; }
.favor-inputs a { color: var(--in-accent-deep); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.favor-inputs a:hover { color: var(--in-ink); }
.favor-inputs :focus-visible { outline: 2px solid var(--in-focus); outline-offset: 2px; }
.favor-inputs h1, .favor-inputs h2, .favor-inputs h3, .favor-inputs p { margin: 0; }
.favor-inputs [hidden] { display: none !important; }
.in-num, .in-tabular { font-variant-numeric: tabular-nums; }
.in-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- shell strip ---------- */
.in-shell { background: var(--in-shell); color: var(--in-shell-ink); }
.in-shell__inner { max-width: 72rem; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; }
.in-shell__brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; min-height: var(--in-target); }
.in-shell__brand:hover { color: inherit; }
.in-shell__mark { width: 1.6rem; height: 1.6rem; flex: none; color: var(--in-shell-ink); }
.in-shell__mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.in-shell__name { font-weight: 700; font-size: var(--in-size-md); letter-spacing: .01em; white-space: nowrap; }
.in-shell__name small { display: block; font-weight: 400; font-size: var(--in-size-xs); color: var(--in-shell-muted); letter-spacing: 0; }
.in-shell__tools { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.in-iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--in-target); min-height: var(--in-target); padding: 0 .6rem; border: 1px solid rgba(254, 241, 232, .28); border-radius: var(--in-radius-control); background: transparent; color: var(--in-shell-ink); cursor: pointer; gap: .4rem; font-size: var(--in-size-sm); font-weight: 700; text-decoration: none; }
.in-iconbtn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.in-iconbtn:hover { background: rgba(254, 241, 232, .1); }
.in-iconbtn[aria-pressed="true"], .in-iconbtn.is-on { background: var(--in-shell-ink); color: var(--in-shell); border-color: var(--in-shell-ink); }
.in-shell :focus-visible { outline-color: var(--in-shell-ink); }
.favor-inputs .in-shell a { color: var(--in-shell-ink); text-decoration: none; }
.favor-inputs .in-shell a.is-on, .favor-inputs .in-shell a[aria-pressed="true"] { color: var(--in-shell); }

/* ---------- page frame and the wide composition ---------- */
.in-page { width: 100%; max-width: 36rem; margin: 0 auto; padding: .75rem 1rem 2.5rem; flex: 1; }
.in-layout { display: block; }
@media (min-width: 60rem) {
  .in-page { max-width: 72rem; padding-top: 1rem; }
  .in-layout { display: grid; grid-template-columns: minmax(20rem, 34rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .in-detail { position: sticky; top: 1rem; }
}

/* ---------- scope chips (campus, date) ---------- */
.in-scope { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1.1rem; }
.in-chip { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: var(--in-target); padding: 0 2.1rem 0 .85rem; border: 1px solid var(--in-rule-strong); border-radius: 999px; background: var(--in-surface); color: var(--in-ink); font-weight: 700; font-size: var(--in-size-sm); box-shadow: var(--in-shadow); }
.in-chip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; appearance: none; }
.in-chip::after { content: ""; position: absolute; right: .9rem; top: 50%; width: .45rem; height: .45rem; border-right: 1.8px solid var(--in-muted); border-bottom: 1.8px solid var(--in-muted); transform: translateY(-65%) rotate(45deg); }
.in-chip:hover { border-color: var(--in-ink); }
.in-chip:has(select:focus-visible) { outline: 2px solid var(--in-focus); outline-offset: 2px; }
.in-chip--static { padding-right: .85rem; }
.in-chip--static::after { display: none; }

/* ---------- headline and progress ---------- */
.in-head { margin: 0 0 .9rem; }
.in-head__title { font-family: var(--in-font-display); font-weight: 700; font-size: var(--in-size-2xl); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.in-head__sub { color: var(--in-muted); font-size: var(--in-size-md); margin-top: .2rem; }
.in-progress { display: grid; gap: .45rem; margin: 0 0 1.4rem; }
.in-progress__line { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-weight: 700; font-size: var(--in-size-md); }
.in-progress__line strong { font-family: var(--in-font-display); font-size: var(--in-size-xl); line-height: 1; }
.in-progress__bar { height: .375rem; border-radius: 999px; background: var(--in-surface-sunken); overflow: hidden; border: 1px solid var(--in-rule); }
.in-progress__bar span { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(var(--in-progress-scale, 0)); background: var(--in-ok); border-radius: inherit; transition: transform var(--motion-layout) var(--motion-ease); }
.in-progress.is-done .in-progress__bar span { background: var(--in-ok); }
.in-progress.is-done .in-progress__line { color: var(--in-ok); }

/* ---------- sections ---------- */
.in-section { margin: 0 0 1.6rem; }
.in-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .55rem; }
.in-section__title { font-weight: 700; font-size: var(--in-size-lg); }
.in-section__count { color: var(--in-muted); font-size: var(--in-size-sm); }
.in-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }

/* ---------- inbox cards ---------- */
.in-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; width: 100%; min-height: 4rem; padding: .8rem .9rem .8rem 1rem; text-align: left; background: var(--in-surface); border: 1px solid var(--in-rule); border-radius: var(--in-radius-card); box-shadow: var(--in-shadow); cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease), border-color var(--motion-feedback) linear, background-color var(--motion-feedback) linear, box-shadow var(--motion-feedback) linear; }
.in-card:hover { border-color: var(--in-rule-strong); background: color-mix(in srgb, var(--in-surface) 96%, var(--in-ink)); }
.in-card:active { transform: translateY(1px); }
.in-card__label { font-weight: 700; font-size: var(--in-size-lg); line-height: 1.2; overflow-wrap: anywhere; }
.in-card__status { color: var(--in-muted); font-size: var(--in-size-sm); display: block; line-height: 1.45; }
.in-card__status .in-dot { display: inline-block; width: .5rem; height: .5rem; margin: 0 .4rem .1rem 0; border-radius: 999px; background: var(--in-faint); vertical-align: middle; }
.in-card--started .in-card__status .in-dot { background: var(--in-warn); }
.in-card__cta { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: .3rem; color: var(--in-accent-deep); font-weight: 700; font-size: var(--in-size-sm); white-space: nowrap; }
.in-card__cta svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-feedback) var(--motion-ease); }
.in-card:hover .in-card__cta svg { transform: translateX(2px); }
.in-card__role { display: inline-flex; align-items: center; gap: .3rem; margin-left: .25rem; vertical-align: middle; padding: .1rem .5rem; border-radius: 999px; background: var(--in-surface-sunken); color: var(--in-muted); font-size: var(--in-size-xs); font-weight: 700; }
.in-card--mine .in-card__role { background: var(--in-accent-wash); color: var(--in-accent-deep); }
.in-card__note { grid-column: 1 / -1; color: var(--in-muted); font-size: var(--in-size-xs); }
.in-card--suggested { border-style: dashed; }

/* ---------- receipts ---------- */
.in-receipt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .2rem .7rem; min-height: 3.25rem; padding: .55rem .6rem .55rem .75rem; background: var(--in-ok-wash); border: 1px solid color-mix(in srgb, var(--in-ok) 25%, var(--in-ok-wash)); border-radius: var(--in-radius-card); }
.in-receipt__tick { grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--in-ok); color: #fff; }
.in-receipt__tick svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.in-receipt.is-fresh .in-receipt__tick path { stroke-dasharray: 28; stroke-dashoffset: 28; animation: in-tick var(--motion-focus) var(--motion-ease) forwards; }
.in-receipt__label { font-weight: 700; font-size: var(--in-size-md); }
.in-receipt__meta { grid-column: 2; color: var(--in-muted); font-size: var(--in-size-sm); }
.in-receipt__edit { grid-column: 3; grid-row: 1 / span 2; min-height: var(--in-target); padding: 0 .6rem; border: 0; background: transparent; color: var(--in-accent-deep); font-weight: 700; font-size: var(--in-size-sm); cursor: pointer; border-radius: var(--in-radius-control); text-decoration: underline; text-underline-offset: .15em; }
.in-receipt__edit:hover { background: rgba(18, 20, 17, .05); }
@keyframes in-tick { to { stroke-dashoffset: 0; } }

/* ---------- automatic values ---------- */
.in-auto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; align-items: center; padding: .85rem 1rem; background: var(--in-surface); border: 1px solid var(--in-rule); border-radius: var(--in-radius-card); box-shadow: var(--in-shadow); }
.in-auto__label { font-weight: 700; }
.in-auto__source { grid-column: 1; color: var(--in-muted); font-size: var(--in-size-sm); }
.in-auto__value { grid-column: 2; grid-row: 1 / span 2; font-family: var(--in-font-display); font-weight: 700; font-size: var(--in-size-num); line-height: 1; font-variant-numeric: tabular-nums; }
.in-auto__badge { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--in-surface-sunken); color: var(--in-muted); font-size: var(--in-size-xs); font-weight: 700; }

/* ---------- quiet links row ---------- */
.in-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding-top: .25rem; }
.in-links a, .in-links button { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--in-target); padding: 0; border: 0; background: transparent; color: var(--in-accent-deep); font-weight: 700; font-size: var(--in-size-sm); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.in-links svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- focused entry ---------- */
.in-back { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--in-target); padding: 0 .25rem 0 0; border: 0; background: transparent; color: var(--in-muted); font-weight: 700; font-size: var(--in-size-sm); cursor: pointer; text-decoration: none; }
.in-back svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.in-back:hover { color: var(--in-ink); }
.in-entry__fields { display: grid; gap: .6rem; margin: 1rem 0; }
@media (min-width: 30rem) { .in-entry__fields { grid-template-columns: 1fr 1fr; } .in-field--wide { grid-column: 1 / -1; } }
.in-field { position: relative; padding: .8rem .9rem .75rem; background: var(--in-surface); border: 1px solid var(--in-rule); border-radius: var(--in-radius-card); box-shadow: var(--in-shadow); transition: border-color var(--motion-state) linear, box-shadow var(--motion-state) linear; }
.in-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.in-field__label { font-weight: 700; font-size: var(--in-size-md); }
.in-field__label small { display: block; font-weight: 400; color: var(--in-muted); font-size: var(--in-size-xs); }
.in-field__req { color: var(--in-muted); font-size: var(--in-size-xs); font-weight: 700; white-space: nowrap; }
.in-field__req.is-required { color: var(--in-ink); }
.in-num { width: 100%; min-height: 3.5rem; padding: .35rem .5rem; text-align: center; font-family: var(--in-font-display); font-weight: 700; font-size: var(--in-size-num); line-height: 1; color: var(--in-ink); background: var(--in-surface-sunken); border: 1px solid var(--in-rule); border-radius: var(--in-radius-control); caret-color: var(--in-accent); appearance: textfield; -moz-appearance: textfield; transition: border-color var(--motion-state) linear, box-shadow var(--motion-state) linear, background-color var(--motion-state) linear; }
.in-num::-webkit-outer-spin-button, .in-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.in-num::placeholder { color: var(--in-faint); font-weight: 400; }
.in-num:hover { border-color: var(--in-rule-strong); }
.in-num:focus { outline: none; background: var(--in-surface); border-color: var(--in-ink); box-shadow: 0 0 0 3px var(--in-accent-wash); }
.in-num:disabled { background: var(--in-surface-sunken); color: var(--in-muted); cursor: not-allowed; }
.in-field.is-dirty { border-color: var(--in-ink); }
.in-field.is-dirty::after { content: "Changed"; position: absolute; top: -.55rem; right: .75rem; padding: .05rem .5rem; border-radius: 999px; background: var(--in-ink); color: var(--in-shell-ink); font-size: var(--in-size-xs); font-weight: 700; pointer-events: none; }
.in-field.is-invalid { border-color: var(--in-bad); background: var(--in-bad-wash); }
.in-field.is-invalid .in-num { border-color: var(--in-bad); box-shadow: inset 0 0 0 1px var(--in-bad); }
.in-field__receipt { margin-top: .45rem; color: var(--in-muted); font-size: var(--in-size-xs); display: flex; align-items: center; gap: .3rem; }
.in-field__receipt svg { width: .85rem; height: .85rem; fill: none; stroke: var(--in-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.in-field__error { margin-top: .45rem; color: var(--in-bad); font-size: var(--in-size-sm); font-weight: 700; }
.in-entry__foot { display: grid; gap: .6rem; margin-top: .25rem; }
.in-entry__count { color: var(--in-muted); font-weight: 700; font-size: var(--in-size-sm); }
.in-entry__count.is-done { color: var(--in-ok); }

/* ---------- buttons ---------- */
.in-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: var(--in-target-primary); padding: 0 1.25rem; border: 0; border-radius: var(--in-radius-control); background: var(--in-accent); color: #fff; font-weight: 700; font-size: var(--in-size-md); cursor: pointer; box-shadow: var(--in-shadow); transition: transform var(--motion-feedback) var(--motion-ease), background-color var(--motion-feedback) linear, opacity var(--motion-feedback) linear; }
.in-primary svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.in-primary:hover { background: var(--in-accent-deep); }
.in-primary:active:not([disabled]) { transform: translateY(1px); }
.in-primary[disabled] { background: var(--in-surface-sunken); color: var(--in-muted); box-shadow: none; cursor: not-allowed; }
.in-primary[aria-busy="true"] { cursor: progress; background: var(--in-accent-deep); }
.in-primary--ok { background: var(--in-ok); }
.in-primary--ok:hover { background: color-mix(in srgb, var(--in-ok) 85%, var(--in-ink)); }
.in-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--in-target); padding: 0 1rem; border: 1px solid var(--in-rule-strong); border-radius: var(--in-radius-control); background: var(--in-surface); color: var(--in-ink); font-weight: 700; font-size: var(--in-size-sm); cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease), border-color var(--motion-feedback) linear, background-color var(--motion-feedback) linear; }
.in-secondary:hover { border-color: var(--in-ink); }
.in-secondary:active:not([disabled]) { transform: translateY(1px); }
.in-secondary[disabled] { color: var(--in-muted); cursor: not-allowed; opacity: .7; }
.in-secondary[aria-pressed="true"] { background: var(--in-ink); color: var(--in-shell-ink); border-color: var(--in-ink); }
.in-text-btn { display: inline-flex; align-items: center; min-height: var(--in-target); padding: 0 .35rem; border: 0; background: transparent; color: var(--in-accent-deep); font-weight: 700; font-size: var(--in-size-sm); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; border-radius: var(--in-radius-control); }
.in-text-btn:hover { background: var(--in-hover-wash); }
.in-text-btn[disabled] { color: var(--in-muted); text-decoration: none; cursor: not-allowed; }
.in-spin { width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: in-spin 900ms linear infinite; }
@keyframes in-spin { to { transform: rotate(360deg); } }

/* ---------- the done panel after Save and finish ---------- */
.in-done { display: grid; gap: .75rem; padding: 1rem; background: var(--in-surface); border: 1px solid var(--in-rule); border-radius: var(--in-radius-card); box-shadow: var(--in-shadow); }
.in-done__title { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: var(--in-size-lg); color: var(--in-ok); }
.in-done__title .in-receipt__tick { width: 1.75rem; height: 1.75rem; }
.in-done__meta { color: var(--in-muted); font-size: var(--in-size-sm); }
.in-done__next { display: flex; flex-direction: column; gap: .5rem; }

/* ---------- segmented control (All inputs: Teams | Stats) ---------- */
.in-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; padding: .25rem; border: 1px solid var(--in-rule-strong); border-radius: var(--in-radius-control); background: var(--in-surface); }
.in-seg button { min-height: calc(var(--in-target) - .5rem); border: 0; border-radius: calc(var(--in-radius-control) - 3px); background: transparent; color: var(--in-muted); font-weight: 700; font-size: var(--in-size-sm); cursor: pointer; transition: background-color var(--motion-state) linear, color var(--motion-state) linear, transform var(--motion-feedback) var(--motion-ease); }
.in-seg button:active { transform: translateY(1px); }
.in-seg button[aria-pressed="true"] { background: var(--in-ink); color: var(--in-shell-ink); }

/* ---------- notes, empty and error states ---------- */
.in-note { color: var(--in-muted); font-size: var(--in-size-sm); margin: .5rem 0 0; }
.in-empty { padding: 1.5rem 1rem; text-align: center; background: var(--in-surface); border: 1px dashed var(--in-rule-strong); border-radius: var(--in-radius-card); color: var(--in-muted); }
.in-empty strong { display: block; color: var(--in-ink); font-size: var(--in-size-md); margin-bottom: .25rem; }
.in-alert { display: grid; gap: .5rem; padding: 1rem; background: var(--in-bad-wash); border: 1px solid color-mix(in srgb, var(--in-bad) 30%, var(--in-bad-wash)); border-radius: var(--in-radius-card); color: var(--in-ink); }
.in-alert strong { color: var(--in-bad); }
.in-alert .in-secondary { justify-self: start; }
.in-frozen { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: var(--in-surface-sunken); color: var(--in-muted); font-size: var(--in-size-sm); font-weight: 700; }

/* ---------- status chip (the UX bar's .ux-status, styled from the tokens) ---------- */
.ux-status { position: fixed; top: calc(var(--console-top, 1rem) + .5rem); left: 50%; z-index: 996; display: inline-flex; align-items: center; gap: .55rem; max-width: min(92vw, 36rem); min-height: 2.5rem; padding: .45rem .9rem .45rem .75rem; border: 1px solid var(--in-ink); border-radius: 999px; background: var(--in-ink); color: var(--in-shell-ink); font-family: var(--in-font-body); font-size: .82rem; font-weight: 700; line-height: 1.3; box-shadow: var(--in-shadow-raised); opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity var(--motion-feedback) var(--motion-ease-exit), transform var(--motion-feedback) var(--motion-ease-exit); }
.ux-status[data-open="true"] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition: opacity var(--motion-state) var(--motion-ease), transform var(--motion-state) var(--motion-ease); }
.ux-status__text { min-width: 0; overflow-wrap: anywhere; }
.ux-status__mark { flex: none; width: 1.1rem; height: 1.1rem; display: inline-grid; place-items: center; border-radius: 999px; }
.ux-status__mark svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ux-status[data-kind="done"] .ux-status__mark { color: #7fc9a2; }
.ux-status[data-kind="done"] .ux-status__mark path { stroke-dasharray: 28; stroke-dashoffset: 28; animation: in-tick var(--motion-state) var(--motion-ease) forwards; }
.ux-status[data-kind="busy"] .ux-status__mark { animation: in-spin 900ms linear infinite; }
.ux-status[data-kind="fail"] { background: var(--in-surface); color: var(--in-ink); border-color: var(--in-bad); box-shadow: var(--in-shadow-raised), inset 0 0 0 1px var(--in-bad); }
.ux-status[data-kind="fail"] .ux-status__mark { color: var(--in-bad); }
.ux-status__btn { position: relative; flex: none; margin: -.2rem -.45rem -.2rem 0; min-height: 2rem; padding: 0 .65rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .76rem; cursor: pointer; }
.ux-status__btn::after { content: ""; position: absolute; inset: -.45rem -.3rem; }
.ux-status__btn:hover { background: var(--in-hover-wash); }
.ux-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .ux-status[data-kind="busy"] .ux-status__mark, .in-spin { animation: none; }
  .ux-status[data-kind="done"] .ux-status__mark path, .in-receipt.is-fresh .in-receipt__tick path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Setup: rail, panel, data model ---------- */
.in-setup { display: grid; gap: 1rem; }
.in-setup__head { display: grid; gap: .5rem; }
.in-setup__scope { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; color: var(--in-muted); font-size: var(--in-size-sm); }
.in-rail { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .35rem; border-bottom: 1px solid var(--in-rule); scrollbar-width: none; }
.in-rail::-webkit-scrollbar { display: none; }
.in-rail button { flex: none; min-height: var(--in-target); padding: 0 .85rem; border: 0; border-radius: var(--in-radius-control); background: transparent; color: var(--in-muted); font-weight: 700; font-size: var(--in-size-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--motion-state) linear, color var(--motion-state) linear; }
.in-rail button:hover { color: var(--in-ink); background: var(--in-hover-wash); }
.in-rail button[aria-selected="true"] { background: var(--in-ink); color: var(--in-shell-ink); }
.in-panel { display: grid; gap: 1rem; }
.in-panel__intro { color: var(--in-muted); font-size: var(--in-size-sm); max-width: 60ch; }
@media (min-width: 60rem) {
  .in-setup { grid-template-columns: 13rem minmax(0, 1fr); }
  .in-setup__head { grid-column: 1 / -1; }
  .in-rail { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--in-rule); padding: 0 .75rem 0 0; overflow: visible; position: sticky; top: 1rem; align-self: start; }
  .in-rail button { text-align: left; }
}
.in-table-wrap { overflow-x: auto; background: var(--in-surface); border: 1px solid var(--in-rule); border-radius: var(--in-radius-card); box-shadow: var(--in-shadow); }
.in-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--in-size-sm); }
.in-table td:first-child { min-width: 13rem; }
.in-table caption { text-align: left; padding: .8rem 1rem .4rem; font-weight: 700; font-size: var(--in-size-md); caption-side: top; }
.in-table th { text-align: left; font-weight: 700; color: var(--in-muted); font-size: var(--in-size-xs); padding: .55rem .75rem; border-bottom: 1px solid var(--in-rule); white-space: nowrap; background: var(--in-surface); position: sticky; top: 0; }
.in-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--in-rule); vertical-align: top; }
.in-table tr:last-child td { border-bottom: 0; }
.in-table tbody tr:hover td { background: var(--in-hover-wash); }
.in-table .in-path { color: var(--in-muted); font-size: var(--in-size-xs); display: block; }
.in-table .in-id { font-variant-numeric: tabular-nums; }
.in-guid { display: inline-flex; align-items: center; gap: .3rem; max-width: 12rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: var(--in-muted); }
.in-guid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-guid button { min-width: 1.75rem; min-height: 1.75rem; border: 1px solid var(--in-rule); border-radius: 6px; background: var(--in-surface); color: var(--in-muted); cursor: pointer; display: inline-grid; place-items: center; }
.in-guid button svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; }
.in-guid button:hover { color: var(--in-ink); border-color: var(--in-rule-strong); }
.in-state { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-weight: 700; }
.in-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--in-faint); }
.in-state--yes::before { background: var(--in-ok); }
.in-state--no::before { background: var(--in-faint); }
.in-state--warn::before { background: var(--in-warn); }
.in-owner { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .35rem .15rem .6rem; border-radius: 999px; background: var(--in-surface-sunken); border: 1px solid var(--in-rule); font-size: var(--in-size-xs); font-weight: 700; white-space: nowrap; }
.in-owner button { min-width: 1.4rem; min-height: 1.4rem; border: 0; border-radius: 999px; background: transparent; color: var(--in-muted); cursor: pointer; display: inline-grid; place-items: center; }
.in-owner button:hover { background: var(--in-hover-wash); color: var(--in-ink); }
.in-owner button svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.in-owner--suggested { border-style: dashed; background: var(--in-surface); }
.in-owners { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.in-owners .in-text-btn { min-height: 2rem; }
.in-switch { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--in-target); cursor: pointer; font-weight: 700; font-size: var(--in-size-sm); }
.in-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.in-switch__track { width: 2.4rem; height: 1.4rem; border-radius: 999px; background: var(--in-rule-strong); position: relative; transition: background-color var(--motion-state) linear; }
.in-switch__track::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #fff; box-shadow: var(--in-shadow); transition: transform var(--motion-state) var(--motion-ease); }
.in-switch input:checked + .in-switch__track { background: var(--in-ink); }
.in-switch input:checked + .in-switch__track::after { transform: translateX(1rem); }
.in-switch input:focus-visible + .in-switch__track { outline: 2px solid var(--in-focus); outline-offset: 2px; }
.in-resp { display: grid; gap: .6rem; padding: .9rem 1rem; background: var(--in-surface); border: 1px solid var(--in-rule); border-radius: var(--in-radius-card); box-shadow: var(--in-shadow); }
.in-resp__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.in-resp__label { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.in-resp__label input { min-height: var(--in-target); padding: 0 .75rem; border: 1px solid var(--in-rule-strong); border-radius: var(--in-radius-control); background: var(--in-surface); font-weight: 700; font-size: var(--in-size-md); width: min(100%, 16rem); }
.in-resp__label input:focus { outline: none; border-color: var(--in-ink); box-shadow: 0 0 0 3px var(--in-accent-wash); }
.in-resp__kind { color: var(--in-muted); font-size: var(--in-size-xs); font-weight: 700; }
.in-resp__rule { color: var(--in-muted); font-size: var(--in-size-sm); }
.in-resp__rule strong { color: var(--in-ink); }
.in-resp__fields { display: grid; gap: .25rem; }
.in-resp__field { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--in-target); padding: 0 .25rem; border-top: 1px solid var(--in-rule); font-size: var(--in-size-sm); }
.in-resp__field:first-child { border-top: 0; }
.in-search { position: relative; }
.in-search input { width: 100%; min-height: var(--in-target); padding: 0 .75rem 0 2.2rem; border: 1px solid var(--in-rule-strong); border-radius: var(--in-radius-control); background: var(--in-surface); }
.in-search input:focus { outline: none; border-color: var(--in-ink); box-shadow: 0 0 0 3px var(--in-accent-wash); }
.in-search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; fill: none; stroke: var(--in-muted); stroke-width: 2; stroke-linecap: round; }
.in-menu { margin-top: .35rem; padding: .25rem; background: var(--in-surface); border: 1px solid var(--in-rule-strong); border-radius: var(--in-radius-control); box-shadow: var(--in-shadow-raised); display: grid; gap: .1rem; }
.in-menu button { display: flex; justify-content: space-between; gap: .75rem; width: 100%; min-height: var(--in-target); padding: 0 .75rem; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: var(--in-size-sm); cursor: pointer; }
.in-menu button:hover, .in-menu button[aria-selected="true"] { background: var(--in-surface-sunken); }
.in-menu small { color: var(--in-muted); }
.in-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem; font-size: var(--in-size-sm); }
.in-kv dt { color: var(--in-muted); }
.in-kv dd { margin: 0; overflow-wrap: anywhere; }
.in-setup__actions { display: flex; flex-wrap: wrap; gap: .5rem; position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(to top, var(--in-bg) 70%, transparent); }
.in-setup__actions .in-primary { width: auto; min-width: 12rem; }

/* ---------- skeleton ---------- */
.in-skel { position: relative; overflow: hidden; background: var(--in-surface-sunken); border-radius: 8px; }
.in-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-100%); animation: in-shimmer 1.4s infinite; }
@keyframes in-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .in-skel::after { animation: none; } }
.in-skel-card { display: grid; gap: .5rem; padding: .9rem 1rem; background: var(--in-surface); border: 1px solid var(--in-rule); border-radius: var(--in-radius-card); }
.in-skel-line { height: .9rem; }

/* ---------- fictional prototype label (DESIGN.md) ---------- */
.in-fictional { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; padding: .25rem .6rem; border-radius: 999px; background: var(--in-warn-wash); color: var(--in-warn); font-size: var(--in-size-xs); font-weight: 700; }

/* ---------- matrix cell state contract ----------
   The surface stylesheet scopes the live grid to #si-app; these shared rules
   keep the same state vocabulary available to other Input App matrices. */
.favor-inputs td.si-cell-clickable {
  color:#1e293b;
  font-weight:700;
  cursor:pointer;
}
.favor-inputs td.si-col-total {
  font-size:.85rem;
  font-weight:900;
  background:#eff6ff;
  color:#172554;
}
.favor-inputs td.si-cell-clickable.si-cell-empty:not(.si-cell-editing) {
  background:#fefce8;
  box-shadow:inset 0 0 0 1px #fcd34d;
  color:#b45309;
  font-weight:700;
}
.favor-inputs td.si-cell-clickable.si-cell-empty:not(.si-cell-editing):hover {
  background:#fef3c7;
}
.favor-inputs td.si-cell-clickable.si-cell-draft:not(.si-cell-editing) {
  background:var(--si-accent-050, var(--in-accent-wash));
  box-shadow:inset 0 0 0 2px var(--si-accent, var(--in-accent));
  color:var(--si-accent-950, var(--in-ink));
  font-weight:900;
}
.favor-inputs tr td.si-cell-editing {
  position:relative;
  background:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,.15), inset 0 0 0 2px var(--si-accent, var(--in-accent));
  color:#1e293b;
  font-weight:700;
  text-decoration:none;
}
.favor-inputs tr td.si-cell-editing .si-grid-editor,
.favor-inputs tr td.si-cell-editing .si-grid-editor:focus {
  background:#fff;
  border:0;
  box-shadow:none;
  outline:none;
  text-decoration:none;
  font:inherit;
  font-weight:700;
  text-align:center;
  padding:0;
  margin:0;
  min-height:0;
  line-height:inherit;
  -moz-appearance:textfield;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.favor-inputs tr td.si-cell-editing .si-grid-editor::-webkit-outer-spin-button,
.favor-inputs tr td.si-cell-editing .si-grid-editor::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}
.favor-inputs td.si-cell-ambiguous,
.favor-inputs td.si-cell-clickable.si-cell-ambiguous,
.favor-inputs td.si-cell-ambiguous:hover {
  background:transparent;
  color:#94a3b8;
  cursor:not-allowed;
  text-decoration:none;
}