:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #171717; color: #ededed; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { max-width: 1480px; margin: 0 auto; padding: 24px clamp(12px, 2.5vw, 36px) 48px; }
.requests-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 22px; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.board-viewers { display: inline-block; margin: 0 0 18px; padding: 6px 11px; border: 1px solid #3d6650; border-radius: 999px; background: #203c2d; color: #b7e9bf; font-weight: 600; }
.board-viewer-panel { position: relative; width: fit-content; }
.board-viewers { font: inherit; font-weight: 600; cursor: pointer; }
.board-viewer-list { position: absolute; top: calc(100% - 18px); left: 0; z-index: 10; min-width: 250px; max-width: min(400px, 85vw); max-height: 300px; overflow-y: auto; margin: 0; padding: 12px 16px; list-style: none; border: 1px solid #4b715b; border-radius: 8px; background: #202620; box-shadow: 0 6px 18px #0009; }
.board-viewer-list li { padding: 4px 0; overflow-wrap: anywhere; }
.request-stats { margin: 0 0 18px; padding: 18px; border: 1px solid #3d4852; border-radius: 12px; background: linear-gradient(135deg, #20282f 0%, #1c2024 58%, #202020 100%); box-shadow: 0 10px 26px #0003; }
.request-stats-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.request-stats-heading h2 { margin: 0; color: #f4f7f9; font-size: 18px; }
.request-stats-heading p:last-child { margin: 0; color: #aeb9c2; font-size: 12px; }
.request-stats-eyebrow { margin: 0 0 3px; color: #8bd6c8; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.request-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.request-stat { min-height: 112px; padding: 14px 15px; border: 1px solid #4b5660; border-radius: 9px; background: #171b1e; }
.request-stat-label { color: #c4cdd4; font-size: 12px; font-weight: 700; }
.request-stat strong { display: block; margin-top: 5px; color: #fff; font-size: 30px; line-height: 1.1; }
.request-stat small { display: block; margin-top: 8px; color: #99a5ae; font-size: 11px; line-height: 1.3; }
.request-stat-total { border-top: 3px solid #84b8dd; }
.request-stat-fulfilled { border-top: 3px solid #5eb87c; }
.request-stat-requested { border-top: 3px solid #d6a94f; }
.request-stat-attention { border-top: 3px solid #c78c62; }
.request-status-breakdown { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #35414a; }
.request-status-count { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #46515a; border-radius: 999px; background: #252b30; color: #c7d0d6; font-size: 11px; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.request-status-count:hover { border-color: #9eabb5; background: #303940; color: #fff; }
.request-status-count:active { transform: translateY(1px); }
.request-status-count-active { box-shadow: 0 0 0 2px #ffc76d66; }
.request-status-count strong { color: #fff; font-size: 12px; }
.request-status-count-fulfilled, .request-status-count-already_available { border-color: #47775a; background: #203c2d; color: #c7f0cf; }
.request-status-count-requested { border-color: #80662d; background: #44391f; color: #ffe09b; }
.request-status-count-not_available { border-color: #8a4d50; background: #382426; color: #ffd4d0; }
.request-stats-error { margin: 0; color: #ffd4d0; }
.eyebrow { margin: 0 0 3px; color: #ffb54b; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.intro { margin: 8px 0 0; color: #bcbcbc; }
a { color: #ffca77; }
.back-link { flex: none; padding: 9px 14px; border: 1px solid #a97325; border-radius: 6px; background: #322511; text-decoration: none; font-weight: 700; }
.request-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 10px; margin-bottom: 18px; padding: 16px; border: 1px solid #3d3d3d; border-radius: 8px; background: #202020; }
.request-filters label { display: grid; gap: 5px; min-width: 0; color: #ccc; font-size: 12px; font-weight: 700; }
.request-filters input, .request-filters select { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid #626262; border-radius: 5px; background: #101010; color: #fff; font: inherit; font-size: 14px; }
.request-filters input:focus-visible, .request-filters select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #ffc76d; outline-offset: 2px; }
.filter-actions { display: flex; align-items: center; gap: 12px; min-height: 38px; }
.filter-actions button { min-height: 38px; padding: 7px 13px; border: 1px solid #ce8b2b; border-radius: 5px; background: #6d4413; color: #fff; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.request-table-wrap { overflow-x: auto; border: 1px solid #3d3d3d; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 12px; border-bottom: 1px solid #333; text-align: left; vertical-align: top; }
th { background: #292929; color: #ddd; font-size: 12px; white-space: nowrap; }
td { min-width: 110px; }
td:nth-child(2), td:nth-child(3), td:nth-child(8) { min-width: 180px; }
td:nth-child(2) { font-weight: 700; }
.request-submitted-time { display: block; margin-top: 4px; color: #9eabb5; font-size: 10px; font-weight: 400; white-space: nowrap; }
tr:nth-child(even) { background: #202020; }
tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: 8px; min-width: 132px; min-height: 36px; padding: 5px 10px 5px 8px; border: 1px solid #555; border-radius: 8px; background: #303030; color: #f1f1f1; font-size: 12px; font-weight: 700; line-height: 1.15; vertical-align: top; }
.status-mark { display: grid; flex: 0 0 21px; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #555; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.status-content { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.status-label { color: inherit; }
.status-detail { color: #c5c5c5; font-size: 10px; font-weight: 600; line-height: 1.1; }
.status-awaiting_action { border-color: #697987; background: #29333c; color: #e3edf5; box-shadow: 0 0 0 1px #69798730; }
.status-awaiting_action .status-mark { background: #697987; color: #fff; }
.status-awaiting_action .status-detail { color: #b9c8d4; }
.status-requested { border-color: #80662d; background: #44391f; color: #ffe09b; }
.status-requested .status-mark { background: #80662d; }
.status-reviewing { border-color: #397195; background: #203d50; color: #c3e5ff; }
.status-reviewing .status-mark { background: #397195; }
.status-awaiting_post { border-color: #71599a; background: #3b3151; color: #e6d9ff; }
.status-awaiting_post .status-mark { background: #71599a; }
.status-partially_fulfilled { border-color: #3d8a80; background: #203f3c; color: #c5f4ec; }
.status-partially_fulfilled .status-mark { background: #3d8a80; }
.status-partially_fulfilled .status-detail { color: #98d9cf; }
.status-fulfilled { border-color: #47775a; background: #203c2d; color: #c7f0cf; }
.status-fulfilled .status-mark, .status-already_available .status-mark { background: #47775a; }
.status-already_available { border-color: #47775a; background: #294138; color: #c8eddd; }
.status-not_available { min-width: 148px; border-color: #a65356; background: #42272a; color: #ffe4e1; box-shadow: 0 0 0 1px #a6535633, 0 2px 6px #0004; }
.status-not_available .status-mark { background: #a65356; font-size: 15px; }
.status-not_available .status-detail { color: #ffc0bb; }
.request-ai-summary {
	width: 100%;
	margin: 0;
	padding: 7px 9px;
	border-left: 2px solid #697987;
	background: #20262b;
	color: #cbd4db;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
}
.request-ai-summary strong { color: #f0f4f7; font-weight: 700; }
.request-ai-summary small { display: block; margin-top: 3px; color: #9eabb5; font-size: 10px; overflow-wrap: anywhere; }
.request-ai-row td { padding: 0 12px 12px; border-bottom: 1px solid #333; }
.request-ai-row { background: #202020; }
.requests-more { display: inline-block; margin-top: 18px; padding: 9px 14px; border: 1px solid #a97325; border-radius: 6px; background: #322511; text-decoration: none; }
.request-editor { max-width: 920px; }
.request-editor-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; border: 1px solid #3d3d3d; border-radius: 8px; background: #202020; }
.request-editor-form label { display: grid; gap: 5px; min-width: 0; color: #ddd; font-weight: 700; }
.request-editor-form input, .request-editor-form select, .request-editor-form textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #626262; border-radius: 5px; background: #101010; color: #fff; font: inherit; }
.request-link-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; }
.request-link-field label { grid-column: 1 / -1; }
.request-link-field button { min-height: 38px; padding: 7px 12px; border: 1px solid #ce8b2b; border-radius: 5px; background: #6d4413; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.request-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.request-fulfillment-link, .request-external-fulfillment-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 4px 9px;
	border: 1px solid #47775a;
	border-radius: 6px;
	background: #203c2d;
	color: #c4efd0 !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.request-fulfillment-link:hover, .request-external-fulfillment-link:hover {
	border-color: #76a987;
	background: #2b503b;
	color: #e0f8e6 !important;
}
.request-fulfillment-link:active, .request-external-fulfillment-link:active { transform: translateY(1px); }
.request-fulfillment-link:focus-visible, .request-external-fulfillment-link:focus-visible { outline: 2px solid #ffc76d; outline-offset: 2px; }
.request-ai-diagnostic { margin-top: 8px; max-width: 560px; color: #c9c9c9; font-size: 12px; font-weight: 400; }
.request-ai-diagnostic summary { color: #ffca77; cursor: pointer; font-weight: 700; }
.request-ai-diagnostic p { margin: 6px 0; }
.request-ai-diagnostic ul { margin: 6px 0; padding-left: 18px; }
.request-ai-diagnostic li { margin: 4px 0; }
.request-ai-diagnostic small { display: block; color: #a9a9a9; font-size: 11px; }
.request-ai-diagnostic a { overflow-wrap: anywhere; }
#request-lookup-status { color: #bcbcbc; font-size: 12px; }
.request-editor-form .full-width, .editor-actions { grid-column: 1 / -1; }
.editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.editor-actions button { min-height: 40px; padding: 8px 16px; border: 1px solid #ce8b2b; border-radius: 5px; background: #6d4413; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.editor-error { padding: 12px; border: 1px solid #bb5555; border-radius: 6px; background: #4c2424; color: #ffdfdf; }
.request-existing-notice { margin: 0; padding: 10px 12px; border: 1px solid #a97325; border-radius: 6px; background: #322511; }
.request-extra-confirmation { display: flex !important; align-items: center; gap: 8px; }
.request-editor-form .request-extra-confirmation input { width: auto; min-height: 0; margin: 0; }
@media (max-width: 960px) { .request-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	main { padding-top: 16px; }
	.requests-header { flex-wrap: wrap; }
	.request-stats-heading { align-items: start; flex-direction: column; gap: 5px; }
	.request-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.request-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
	.request-filters label:nth-of-type(4), .request-filters label:nth-of-type(5), .request-filters label:nth-of-type(6) { grid-column: 1 / -1; }
	.filter-actions { grid-column: 1 / -1; }
	.request-editor-form { grid-template-columns: 1fr; padding: 14px; }
	.request-timeline-event { grid-template-columns: 1fr; gap: 5px; }
	.request-link-field { grid-template-columns: 1fr; }
	.request-table-wrap { border: 0; overflow: visible; }
	table, tbody, tr, td { display: block; width: 100%; }
	thead { display: none; }
	tr { margin-bottom: 12px; border: 1px solid #444; border-radius: 8px; overflow: hidden; background: #202020; }
	td { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 8px; min-width: 0 !important; padding: 8px 11px; border-bottom: 1px solid #333; overflow-wrap: anywhere; }
	td::before { content: attr(data-label); color: #aaa; font-weight: 600; }
	.request-ai-row { margin-top: -12px; border-top: 0; border-radius: 0 0 8px 8px; }
	.request-ai-row td { display: block; padding: 0 11px 11px; border-bottom: 0; }
	.request-ai-row td::before { display: block; margin-bottom: 4px; }
}
@media (max-width: 390px) { .request-stat-grid { grid-template-columns: 1fr; } }
.request-review { margin-top: 32px; padding-top: 24px; border-top: 1px solid #555; scroll-margin-top: 16px; }
.request-review > header { margin-bottom: 18px; }
.request-review h2 { margin: 0; font-size: 24px; }
.request-review > header p:last-child { margin: 6px 0 0; color: #bcbcbc; }
.request-review-card { margin: 1rem 0; padding: 1rem; border: 1px solid #464646; border-radius: 8px; background: #202020; }
.request-review-card h3 { margin: 0; font-size: 18px; }
.request-review-card blockquote { margin: .75rem 0; padding: .75rem 1rem; border-left: 3px solid #ffb54b; background: #171717; white-space: pre-wrap; }
.request-review-card .request-editor-form { margin-top: 12px; }
.request-timeline { margin-top: 32px; padding-top: 24px; border-top: 1px solid #555; scroll-margin-top: 16px; }
.request-timeline > header p:last-child { margin: 6px 0 0; color: #bcbcbc; }
.request-timeline-event { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; margin: 10px 0; padding: 12px 14px; border: 1px solid #3d3d3d; border-radius: 7px; background: #202020; }
.request-timeline-event time { color: #aaa; font-size: 12px; }
.request-timeline-event strong { color: #ffca77; }
.request-timeline-event small { display: block; margin-top: 3px; color: #aeb7c0; font-size: 11px; }
.request-timeline-event p { margin: 7px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-timeline-event details { margin-top: 8px; color: #bcbcbc; }
.request-timeline-event blockquote { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid #ffb54b; background: #171717; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-timeline-event pre { margin: 6px 0 0; padding: 8px 10px; background: #171717; color: #c9d3dc; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.request-timeline-empty { color: #bcbcbc; }
