/* Case intake: the contributor's form and the owner's review queue. Builds on the
   tokens in exam-env.css. */
.ik-page { background: var(--bg); color: var(--text); font-family: var(--font); }
.ik-page .hidden { display: none !important; }
.ik-header { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 24px; background: #0e1116; border-bottom: 1px solid var(--line); }
.ik-brand { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ik-header-right { display: flex; align-items: center; gap: 14px; }
.ik-kicker { font-size: 13px; color: var(--gold); }
.ik-link { background: none; border: none; padding: 0; color: #8cb4d4; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ik-link:hover { color: #b3d0e6; }

.ik { max-width: 1180px; margin: 0 auto; padding: 32px 24px 96px; }
.ik-intro h1 { margin: 0 0 10px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.ik-intro p { margin: 0; max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ik-steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.ik-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ik-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.ik-steps li.done .ik-step-n { background: var(--ok); border-color: var(--ok); color: #fff; }
.ik-steps li.done { color: var(--text); }
.ik-steps li.attention .ik-step-n { border-color: var(--warn); color: var(--warn); }

.ik-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; margin-top: 30px; align-items: start; }
.ik-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.ik-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px 24px; }
.ik-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.ik-card-head h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.ik-card-head p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.ik-num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--gold); margin-top: 1px; }

.ik-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.ik-grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.ik-wide { grid-column: 1 / -1; }
.ik-span2 { grid-column: span 1; }
.ik-grid-3 .ik-span2 { grid-column: 3; }
.ik-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ik-field > span { font-size: 13px; color: var(--text); }
.ik-field > span b { font-weight: 500; color: var(--muted); margin-left: 6px; font-size: 12px; }
.ik-field > span em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 6px; }
.ik-field small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.ik-field input, .ik-field select, .ik-field textarea, .ik-series input, .ik-series select, .ik-thumb select {
    width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; background: #0e1116; color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14.5px; transition: border-color 0.12s, box-shadow 0.12s; }
.ik-field textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ik-field input:focus, .ik-field select:focus, .ik-field textarea:focus, .ik-series input:focus, .ik-series select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18); }
.ik-field.flash input, .ik-field.flash select, .ik-field.flash textarea, .ik-flash { border-color: var(--warn) !important; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.28) !important; }
.ik-preview { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #0e1116; border: 1px dashed var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); min-height: 20px; }
.ik-preview strong { color: var(--text); font-weight: 500; }

.ik-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--line); border-radius: 12px; background: #0e1116; text-align: center; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.ik-drop:hover, .ik-drop.over { border-color: var(--gold); background: #15171a; }
.ik-drop-text { font-size: 15px; }
.ik-drop-sub { font-size: 12.5px; color: var(--muted); }
.ik-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; margin-top: 16px; }
.ik-thumb { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #0e1116; border: 1px solid var(--line); border-radius: 10px; cursor: grab; }
.ik-thumb.dragging { opacity: 0.5; }
.ik-thumb img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; border-radius: 6px; }
.ik-thumb-n { position: absolute; top: 16px; left: 16px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--gold); color: #1a1508; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ik-thumb select { height: 32px; font-size: 13px; padding: 0 8px; }
.ik-thumb-row { display: flex; gap: 6px; }
.ik-thumb-row .btn { flex: 1; height: 30px; padding: 0; font-size: 12px; }
.ik-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--text); cursor: pointer; }
.ik-check input { margin-top: 3px; accent-color: var(--gold); }

.ik-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ik-seg-opt { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: 10px; background: #0e1116; cursor: pointer; }
.ik-seg-opt input { position: absolute; left: 14px; top: 15px; margin: 0; accent-color: var(--gold); }
.ik-seg-opt:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.ik-seg-title { font-size: 14.5px; font-weight: 600; }
.ik-seg-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ik-series { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ik-series-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px 14px; padding: 14px 16px; background: #0e1116; border: 1px solid var(--line); border-radius: 10px; }
.ik-series-n { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--muted); }
.ik-series-fields { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.ik-series-fields .ik-wide { grid-column: 1 / -1; }
.ik-series-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.ik-series-fields input, .ik-series-fields select { height: 36px; font-size: 14px; }
.ik-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-pick-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.ik-pick-btn.on { background: var(--gold); border-color: var(--gold); color: #1a1508; font-weight: 600; }
.ik-series-remove { justify-self: end; grid-column: 2; }

.ik-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ik-actions .btn { height: 40px; padding: 0 18px; font-size: 14px; }
.ik-note { font-size: 13px; color: var(--muted); }
.ik-progress { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ik-prog { display: flex; gap: 12px; }
.ik-prog-step { flex: 0 0 110px; color: var(--muted); }
.ik-prog.ok .ik-prog-step { color: #b6e0c8; }
.ik-prog.bad .ik-prog-step { color: #e8b4b4; }
.ik-issues { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ik-issues-head { padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.ik-issues-head.ok { background: #14261c; color: #b6e0c8; border: 1px solid #2e5c45; }
.ik-issues-head.bad { background: #2a1414; color: #e8b4b4; border: 1px solid #7a2e2e; }
.ik-issue { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; }
.ik-issue-field { text-align: left; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: #0e1116; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-issue.error .ik-issue-field { border-color: #7a2e2e; color: #e8b4b4; }
.ik-issue.warning .ik-issue-field { border-color: #6a5c2e; color: #e6d9a8; }
.ik-review { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #0e1116; font-size: 14px; line-height: 1.55; }
.ik-review h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ik-review p { margin: 0; }
.ik-suggest { margin-top: 12px; }
.ik-suggest-field { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ik-suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px; border-top: 1px solid #1c2128; }
.ik-suggest-row .btn { height: 28px; padding: 0 12px; font-size: 12px; }
.ik-after { margin-top: 16px; }
.ik-after a.btn { text-decoration: none; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; }

.ik-rail { position: sticky; top: 16px; }
.ik-rail-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; }
.ik-rail-title { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.ik-status { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.ik-status.st-checked { border-color: #2e5c45; color: #b6e0c8; }
.ik-status.st-submitted { border-color: #35516a; color: #a9d0ea; }
.ik-status.st-accepted { border-color: var(--gold-dim); color: var(--gold); }
.ik-ready { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ik-ready li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.ik-ready li:hover { color: var(--text); }
.ik-ready i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; }
.ik-ready li.done { color: var(--text); }
.ik-ready li.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.ik-rail-actions { margin-top: 16px; }
.ik-rail-actions .btn { width: 100%; height: 40px; font-size: 14px; }
.ik-rail-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ik-rail-link { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #0e1116; border: 1px solid var(--line); font-size: 12px; word-break: break-all; color: var(--muted); }
.ik-rail-link a { color: #8cb4d4; }

.ik-queue { margin-top: 26px; }
.ik-queue-list { display: flex; flex-direction: column; gap: 6px; }
.ik-queue-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 130px 110px 70px; gap: 12px; align-items: center; padding: 10px 12px; background: #0e1116; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ik-queue-row:hover { border-color: #5a6270; }
.ik-queue-row.current { border-color: var(--gold); }
.ik-queue-row .q-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-queue-row .q-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-queue-row .q-status { font-size: 12px; }
.ik-queue-row .q-status.st-submitted { color: #a9d0ea; }
.ik-queue-row .q-status.st-accepted { color: var(--gold); }
.ik-queue-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 130px 110px 70px; gap: 12px; padding: 0 12px 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

@media (max-width: 960px) {
    .ik-body { grid-template-columns: 1fr; }
    .ik-rail { position: static; }
    .ik-queue-row, .ik-queue-head { grid-template-columns: minmax(0, 1fr) 110px; }
    .ik-queue-row .q-meta:nth-child(2), .ik-queue-row .q-meta:nth-child(3), .ik-queue-row .q-meta:nth-child(5), .ik-queue-head span:nth-child(2), .ik-queue-head span:nth-child(3), .ik-queue-head span:nth-child(5) { display: none; }
}
@media (max-width: 640px) {
    .ik { padding: 22px 14px 80px; }
    .ik-card { padding: 18px 16px 20px; border-radius: 10px; }
    .ik-grid, .ik-grid-3 { grid-template-columns: 1fr; }
    .ik-grid-3 .ik-span2 { grid-column: auto; }
    .ik-seg { grid-template-columns: 1fr; }
    .ik-series-fields { grid-template-columns: 1fr; }
    .ik-issue { grid-template-columns: 1fr; gap: 4px; }
    .ik-intro h1 { font-size: 22px; }
}