/* Bank, editor and source views: a quieter reading workspace inspired by Figma. */
.bank-view{container:question-bank / inline-size}
.bank-view>.page-head{position:relative;isolation:isolate;overflow:hidden;margin-bottom:24px;padding:30px 32px;background:linear-gradient(118deg,#173d33,#0e2923 72%);border:1px solid #21483c;border-radius:20px;color:#fcf9f2}
.bank-view>.page-head::after{content:"";position:absolute;z-index:-1;width:220px;height:220px;inset-inline-end:-90px;inset-block-start:-135px;border:1px solid #e9d9b52b;border-radius:50%;box-shadow:0 0 0 35px #e9d9b508,0 0 0 70px #e9d9b505;pointer-events:none}
.bank-view>.page-head .breadcrumb{margin-bottom:10px;color:#e9d9b5;font-size:13px;font-weight:600}
.bank-view>.page-head h1{font-family:Amiri,serif;font-size:38px;line-height:1.45;color:#fcf9f2}
.bank-view>.page-head p:not(.breadcrumb){max-width:650px;color:#d3dfd7;font-size:14px;margin-top:6px}
.bank-view>.page-head .btn.primary{background:#e9d9b5;border-color:#e9d9b5;color:#3d321a;min-height:48px;padding-inline:20px;white-space:nowrap}
.bank-view>.page-head .btn.primary:hover{background:#f5e7c8;border-color:#f5e7c8}
.bank-view .bank-stats,.bank-sources .bank-stats{gap:16px;margin-bottom:26px}
.bank-view .bank-stats>.stat,.bank-sources .bank-stats>.stat{display:flex;align-items:center;gap:16px;padding:22px 24px;background:#fffefb;border:1px solid #e3e7dd;border-radius:16px;box-shadow:0 3px 12px #0e292304}
.bank-stats .bank-stat-icon{width:48px;height:48px;min-width:48px;display:grid;place-items:center;border-radius:14px;background:#ecf1e9;color:#285847}
.bank-stats>.stat:nth-child(2) .bank-stat-icon{background:#f5edda;color:#80672b}
.bank-stat-icon svg{width:24px;height:24px}
.bank-stat-copy{min-width:0}
.bank-view .bank-stat-copy .caps,.bank-sources .bank-stat-copy .caps{display:block;font-size:12px;line-height:1.8;color:#52665b;font-weight:500}
.bank-view .bank-stat-copy b,.bank-sources .bank-stat-copy b{display:block;font-size:31px;line-height:1.5;font-weight:650;letter-spacing:-.8px;font-variant-numeric:tabular-nums;color:#143d30}
.bank-filter-panel{padding:24px;margin-bottom:24px;border:1px solid #e3e7dd;border-radius:18px;background:#fffefb;box-shadow:0 3px 12px #0e292303}
.bank-filter-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-bottom:12px}
.bank-filter-heading h2{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:650}
.bank-filter-heading h2 svg{width:20px;height:20px;color:#7b683c}
.bank-filter-heading>.btn{font-size:12px;background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:4px;padding-inline:4px}
.bank-view .bank-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:18px 16px;margin:0}
.bank-toolbar>.field{font-size:12px;color:#51655a;gap:8px;min-width:0}
.bank-toolbar>.bank-search-field{grid-column:1/-1}
.bank-view .bank-toolbar select{width:100%;min-width:0;min-height:48px;padding:10px 12px;background:#fafbf6;border-color:#dce3d7;border-radius:10px;font-size:13px;color:#1c4033}
.bank-view .bank-toolbar select:disabled{background:#f0f2eb;color:#68786e}
.bank-view .bank-toolbar .searchbox{width:100%;min-width:0;min-height:52px;gap:12px;padding-inline:16px;background:#f8faf5;border-color:#dce3d7;border-radius:12px}
.bank-view .bank-toolbar .searchbox>svg{color:#667b6e;width:21px;height:21px}
.bank-view .bank-toolbar .searchbox input{min-width:0;min-height:50px;padding:8px 0;font-size:15px;flex:1;border-radius:6px}
.bank-view .bank-toolbar .searchbox:focus-within{border-color:#6c8c79;box-shadow:0 0 0 3px #1b59300a}
.bank-filter-panel>#bank-difficulty-note{margin-top:14px;font-size:12px}
.bank-view .bank-actions{margin-bottom:16px;gap:12px;align-items:center}
.bank-view .bank-actions>span{font-size:13px;color:#4d6357}
.bank-view .bank-actions>.row{gap:8px;flex-wrap:wrap}
.bank-view .bank-actions .btn{font-size:12px;padding-inline:12px;border-radius:9px;background:transparent}
.bank-view .bank-actions .btn svg{width:17px;height:17px}
.bank-view .bank-results{padding:0;border:1px solid #e0e5da;border-radius:16px;overflow:hidden;box-shadow:0 3px 12px #0e292303;background:#fffefb}
.bank-table{table-layout:fixed}
.bank-table th{padding:15px 16px;background:#edf2e9;color:#52655a;font-size:11px;font-weight:600;border-bottom-color:#dfe6d9}
.bank-table th:first-child{width:38%}
.bank-table th:nth-child(2){width:12%}
.bank-table th:nth-child(3){width:17%}
.bank-table th:nth-child(4){width:9%}
.bank-table th:nth-child(5){width:14%}
.bank-table th:last-child{width:10%}
.bank-table td{padding:18px 16px;font-size:12px;vertical-align:top;border-bottom-color:#e9ece2;overflow-wrap:anywhere}
.bank-table tbody tr:hover{background:#fafbf6}
.bank-table .question-col{min-width:0;max-width:none}
.bank-table .question-link{display:block;width:100%;padding:0;font:23px/1.85 Amiri,serif;color:#173e30;text-align:start;white-space:normal;min-height:44px}
.bank-question-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.bank-table .question-link:hover{text-decoration:none}
.bank-table .question-link:hover .bank-question-excerpt{text-decoration:underline;text-underline-offset:4px}
.bank-preview-link{display:flex;align-items:center;gap:6px;margin-top:8px;color:#61794e;font:11px/1.8 Noto,Tahoma,sans-serif;font-weight:600}
.bank-preview-link svg{width:15px;height:15px}
.bank-table .question-col small{margin-top:8px;color:#738275;font-size:9px;line-height:1.8;letter-spacing:.1px}
.bank-topic-name{font-weight:600;color:#365943}
.bank-table .pill{font-size:10px;padding:4px 8px;border-radius:6px;white-space:normal}
.bank-table .btn{font-size:11px;padding:6px 10px;border-radius:8px;gap:6px;white-space:nowrap;background:#f8faf4}
.bank-table .btn svg{width:14px;height:14px}
.bank-view .bank-pagination{gap:16px;margin-top:20px;flex-wrap:wrap}
.bank-pagination>.pagination{margin-top:0;gap:10px}
.bank-pagination>.muted{font-size:12px}
.bank-pagination .pill{min-height:44px;padding-inline:16px;border-color:#dce3d6;background:#fffefb;font-variant-numeric:tabular-nums}
.bank-pagination .btn{min-width:90px;font-size:12px;border-radius:10px}
.bank-pagination .btn svg{width:17px;height:17px}
.bank-view .empty{padding:48px 24px;text-align:center;border-radius:18px}
.bank-view .empty .empty-icon{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 16px;border-radius:18px;background:#edf2e9;color:#3b5f49}
.bank-view .empty p{max-width:520px;margin:12px auto 20px;color:#5b6d60;font-size:14px}

/* The stored question and its evidence remain separate, readable sections. */
:is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses)>.page-head{margin-bottom:28px}
:is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses) .breadcrumb{color:#7c6b43;font-size:12px;margin-bottom:8px}
:is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses)>.page-head h1{font-family:Amiri,serif;font-size:36px}
:is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses)>.page-head p:not(.breadcrumb){font-size:14px;color:#5a6e60;margin-top:4px}
:is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses) .card{border-radius:16px;border-color:#e0e6d9;background:#fffefb;box-shadow:0 3px 12px #0e292303}
:is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses) .card.soft{background:#f0f3e9}
:is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses) .card>h2{display:flex;align-items:center;gap:10px;font-size:18px}
:is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses) .card>h2::before{content:"";width:3px;height:21px;flex-shrink:0;background:#bd9e5d;border-radius:3px}
.bank-detail .bank-question-preview{border-top:3px solid #bba064;padding:24px 28px}
.bank-detail .bank-question-preview>.row{gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #e6eadf}
.bank-detail .bank-question-preview .reference-card{min-height:240px;padding:16px 0}
.bank-detail .meta-list{grid-template-columns:minmax(90px,.8fr) minmax(0,1fr);font-size:13px;gap:12px}
.bank-detail .meta-list dt{color:#617365}
.bank-detail .meta-list dd{margin:0;color:#24432e;overflow-wrap:anywhere}
.bank-detail .bank-evidence{padding:16px;border-radius:10px;background:#f2f4ec;border:1px solid #e0e6d9;font-size:12px;line-height:2;max-height:360px}
.bank-detail .detail-text{padding:20px;background:#fafbf6;border:1px solid #e5eade;border-radius:12px;overflow-wrap:anywhere}
.bank-editor .field{font-size:13px;color:#385442}
.bank-editor input,.bank-editor select,.bank-editor textarea{border-radius:10px;border-color:#d9e2d3;background:#fbfcf7;font-size:14px;min-height:48px}
.bank-editor textarea{line-height:2;padding:14px 16px;min-height:120px}
.bank-editor textarea[name=prompt],.bank-editor textarea[name=answer],.bank-editor textarea[name=fullText]{font-family:Amiri,serif;font-size:23px;line-height:1.95}
.bank-editor .editor-layout>.stack>.card{padding:28px}
.bank-editor .editor-layout>aside>.card:first-child{border-top:3px solid #bb9b58}
.bank-editor .editor-layout .notice{border-radius:14px;background:#edf3e8;font-size:13px}
.bank-sources>.grid.two{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:24px}
.bank-sources .source-item{padding-block:22px;border-bottom-color:#e6eadd;gap:16px}
.bank-sources .source-item>.symbol{width:42px;height:42px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;background:#edf3e8;color:#4b6c4e}
.bank-sources .source-item h3{font-size:15px}
.bank-sources .source-item p{margin-top:6px;color:#5a6e5c;font-size:13px;line-height:1.95}
.bank-sources tr[data-source-topic]{background:#edf2e8}
.bank-sources tr[data-source-topic]>th{color:#244c36;font-weight:650;background:transparent}
.bank-sources tr[data-source-format]>th{padding-inline-start:24px;font-weight:400;background:transparent;color:#586e58;white-space:normal}
.bank-sources .table th,.bank-sources .table td{padding:12px 14px}
.bank-sources .table td{font-size:12px}
.bank-licenses .source-item p{font-size:14px;line-height:2;color:#596e5d}

/* Preserve the table's reading order while presenting each result as a card. */
@container question-bank (max-width:900px){
 .bank-table,.bank-table tbody{display:block;width:100%;min-width:0}
 .bank-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;border:0}
 .bank-view .bank-results{padding:0;background:transparent;border:0;overflow:visible;box-shadow:none}
 .bank-table tbody{display:grid;gap:16px}
 .bank-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px;padding:24px;border:1px solid #dfe5d8;border-radius:16px;background:#fffefb;box-shadow:0 3px 12px #0e292303}
 .bank-table tbody tr:hover{background:#fffefb;border-color:#c7d6be}
 .bank-table td{display:block;padding:0;border:0;font-size:13px;line-height:1.8}
 .bank-table td.question-col{grid-column:1/-1;padding-bottom:18px;margin-bottom:2px;border-bottom:1px solid #e6eadd}
 .bank-table td[data-label]::before{content:attr(data-label);display:block;font-size:10px;color:#73816e;margin-bottom:5px;font-weight:500}
 .bank-table .question-link{font-size:25px;line-height:1.9}
 .bank-table .question-col small{font-size:10px}
 .bank-table .bank-preview-link{font-size:12px}
 .bank-table .pill{font-size:11px;padding:5px 10px}
 .bank-table td.bank-row-actions{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:4px}
 .bank-table .btn{font-size:12px;padding-inline:16px}
}
@media(max-width:1199px){
 .bank-view .bank-stats>.stat,.bank-sources .bank-stats>.stat{gap:12px;padding:20px 16px}
 .bank-stats .bank-stat-icon{width:40px;height:40px;min-width:40px;border-radius:12px}
 .bank-view .bank-stat-copy b,.bank-sources .bank-stat-copy b{font-size:28px}
 .bank-view>.page-head{padding:28px}
 .bank-view>.page-head h1{font-size:34px}
}
@media(max-width:979px){
 .bank-sources>.grid.two{grid-template-columns:1fr}
 .bank-view .bank-stats>.stat,.bank-sources .bank-stats>.stat{display:block;padding:18px}
 .bank-stats .bank-stat-icon{margin-bottom:12px}
 .bank-view .bank-stat-copy .caps,.bank-sources .bank-stat-copy .caps{font-size:11px}
 .bank-view .bank-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bank-detail .editor-layout>aside,.bank-editor .editor-layout>aside{align-items:start}
}
@media(max-width:559px){
 .bank-view>.page-head{padding:24px 20px;border-radius:16px}
 .bank-view>.page-head h1{font-size:32px}
 .bank-view>.page-head p:not(.breadcrumb){font-size:13px;line-height:1.9}
 .bank-view>.page-head>.row>.row{margin-top:6px}
 .bank-view>.page-head .btn.primary{font-size:13px;min-height:44px;padding-inline:16px}
 .bank-view .bank-stats.grid.three,.bank-sources .bank-stats.grid.three{grid-template-columns:1fr;gap:10px}
 .bank-view .bank-stats>.stat,.bank-sources .bank-stats>.stat{display:flex;justify-content:flex-start;gap:14px;padding:16px 20px}
 .bank-stats .bank-stat-icon{margin:0;width:42px;height:42px;min-width:42px}
 .bank-stat-copy{display:flex;align-items:center;justify-content:space-between;flex:1;gap:16px}
 .bank-view .bank-stat-copy .caps,.bank-sources .bank-stat-copy .caps{font-size:11px;max-width:150px}
 .bank-view .bank-stat-copy b,.bank-sources .bank-stat-copy b{font-size:25px;white-space:nowrap}
 .bank-filter-panel{padding:20px 16px;border-radius:16px}
 .bank-filter-heading{gap:10px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}
 .bank-filter-heading h2{font-size:15px;gap:8px;min-height:32px}
 .bank-filter-heading>.btn{margin-inline-start:28px}
 .bank-view .bank-toolbar{gap:16px 12px}
 .bank-toolbar>.field{font-size:11px}
 .bank-view .bank-toolbar select{font-size:12px;padding:10px 8px}
 .bank-view .bank-toolbar .searchbox{padding-inline:12px;gap:8px}
 .bank-view .bank-toolbar .searchbox input{font-size:13px}
 .bank-view .bank-actions{gap:12px}
 .bank-view .bank-actions>.row{gap:8px}
 .bank-view .bank-actions .btn{font-size:11px;padding-inline:10px}
 .bank-table tbody tr{padding:20px;gap:14px 18px}
 .bank-table .question-link{font-size:23px}
 .bank-table td{font-size:12px}
 .bank-table .question-col small{font-size:9px}
 .bank-view .bank-pagination{justify-content:center}
 .bank-pagination>.muted{text-align:center}
 .bank-pagination .btn{min-width:80px;padding-inline:12px}
 :is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses)>.page-head h1{font-size:31px}
 :is(.bank-detail,.bank-editor,.bank-sources,.bank-licenses)>.page-head p:not(.breadcrumb){font-size:13px}
 .bank-detail .bank-question-preview,.bank-editor .editor-layout>.stack>.card{padding:22px 18px}
 .bank-detail .meta-list{grid-template-columns:1fr;gap:5px}
 .bank-detail .meta-list dd{margin-bottom:10px}
 .bank-detail .detail-text{padding:16px}
 .bank-detail .editor-layout>aside,.bank-editor .editor-layout>aside{grid-template-columns:1fr}
 .bank-sources .table th,.bank-sources .table td{padding:10px 8px}
 .bank-sources .table th{font-size:10px}
 .bank-sources .table td{font-size:11px}
 .bank-sources tr[data-source-format]>th{padding-inline-start:16px}
}