/* web.css — the library and the new-corpus wizard.
   editor.css owns the editing surface; this owns everything around it. The
   editor assumes it fills the window, so `body.web` only releases that when a
   non-editor view is showing. */

body.web { overflow: auto; }
body.web:has(#view-editor:not([hidden])) { overflow: hidden; }

.view[hidden] { display: none; }

#view-library, #view-new {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.page-hdr { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.page-hdr h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
.lede { flex-basis: 100%; margin: .25rem 0 0; color: #475569; max-width: 46rem;
        line-height: 1.55; }

.panel { margin-top: 2.25rem; }
.panel-hdr { display: flex; align-items: center; justify-content: space-between;
             border-bottom: 1px solid #e2e8f0; padding-bottom: .5rem; }
.panel-hdr h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
                color: #64748b; margin: 0; }

button.primary { background: #1d4ed8; color: #fff; border: 1px solid #1d4ed8;
                 border-radius: 6px; padding: 5px 12px; font-size: .82rem;
                 cursor: pointer; }
button.primary:hover { background: #1e40af; }
button.primary:disabled { background: #cbd5e1; border-color: #cbd5e1; cursor: default; }
button.danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

.cards { display: grid; gap: 1rem; margin-top: 1rem;
         grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
        padding: 1rem 1.1rem 1.1rem; }
.card h3 { margin: 0 0 .3rem; font-size: .98rem; }
.card-meta { margin: 0; font-size: .78rem; color: #64748b; }
.card-desc { margin: .5rem 0 0; font-size: .82rem; color: #475569; line-height: 1.45; }
.card-when { margin: .5rem 0 0; font-size: .72rem; color: #94a3b8; }
.card-actions { display: flex; gap: .4rem; margin-top: .9rem; flex-wrap: wrap; }
.card-actions button { font-size: .76rem; padding: 4px 9px; border-radius: 6px;
                       border: 1px solid #cbd5e1; background: #f8fafc; cursor: pointer; }
.tag { background: #eff6ff; color: #1d4ed8; border-radius: 4px; padding: 1px 5px;
       font-size: .7rem; }
.bar { height: 4px; background: #e2e8f0; border-radius: 2px; margin-top: .6rem;
       overflow: hidden; }
.bar span { display: block; height: 100%; background: #16a34a; }
.empty { color: #94a3b8; font-size: .85rem; }

/* ── wizard ── */
.wizard { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0 0; }
.wizard li { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
             padding: 1.1rem 1.2rem; margin-bottom: .9rem; }
.wizard h3 { margin: 0 0 .3rem; font-size: .92rem; }
.optional { font-weight: 400; color: #94a3b8; font-size: .76rem; }
.hint { margin: 0 0 .7rem; font-size: .8rem; color: #64748b; line-height: 1.5; }
.hint code { background: #f1f5f9; border-radius: 3px; padding: 0 4px; font-size: .95em; }
.file-report { margin: .55rem 0 0; font-size: .8rem; min-height: 1em; }
.file-report.good { color: #15803d; }
.file-report.bad { color: #b91c1c; }

.wizard-foot { display: flex; align-items: center; gap: .9rem; margin-top: 1.2rem;
               flex-wrap: wrap; }
.wizard-foot label { font-size: .82rem; color: #475569; }
.wizard-foot input { font-size: .85rem; padding: 4px 8px; border-radius: 6px;
                     border: 1px solid #cbd5e1; margin-left: .4rem; }
#create-status { font-size: .8rem; color: #64748b; }

.diagnostics { margin-top: 1.2rem; border-left: 3px solid #cbd5e1;
               padding: .3rem 0 .3rem 1rem; }
.diagnostics p { margin: .3rem 0; font-size: .83rem; line-height: 1.5; }
.diagnostics .ok { color: #15803d; }
.diagnostics .note { color: #92400e; }
.diagnostics .bad { color: #b91c1c; }

/* ── storage footer ── */
.storage-note { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #e2e8f0;
                font-size: .78rem; color: #64748b; line-height: 1.5; }
.storage-note .warn { display: block; color: #92400e; margin-top: .3rem; }

#progress-chip { font-size: .74rem; color: #64748b; }