:root { --ink:#17231f; --muted:#66716c; --paper:#f7f4ec; --line:#d7d1c4; --accent:#bf4f30; --white:#fffdfa; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at top right,#e6e1d5 0,transparent 36rem),var(--paper); font:16px/1.62 Georgia, 'Times New Roman', serif; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px max(24px,calc((100vw - 1120px)/2)); border-bottom:1px solid var(--line); font-family:Arial,sans-serif; }
.brand { display:flex; align-items:center; font-weight:800; letter-spacing:.03em; } .brand-owner:link,.brand-owner:visited { color:var(--ink); text-decoration:none; } .brand-project:link,.brand-project:visited { color:var(--accent); text-decoration:none; font-weight:600; } .brand-divider { color:var(--accent); font-weight:600; white-space:pre; } .topbar-links { display:flex; align-items:center; gap:18px; } .home-link { color:var(--ink); font-size:13px; text-underline-offset:4px; }
.document { width:min(1050px,calc(100% - 32px)); margin:48px auto 64px; padding:clamp(24px,6vw,72px); background:var(--white); box-shadow:0 20px 60px rgba(25,35,29,.09); }
.status { display:inline-block; margin-bottom:24px; padding:6px 10px; border:1px solid #deb9a8; color:#88351e; background:#fff4ee; font:700 11px/1 Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.back-link { display:inline-flex; align-items:center; margin:0 0 22px; padding:9px 13px; color:var(--ink); background:#e9e4d8; border:1px solid var(--line); text-decoration:none; font:700 13px/1 Arial,sans-serif; transition:background .2s ease; } .back-link:hover { background:#dfd9ca; }
h1,h2,h3 { font-family:Arial,sans-serif; line-height:1.1; letter-spacing:-.035em; } h1 { max-width:760px; margin:0 0 24px; font-size:clamp(34px,6vw,64px); } h2 { margin:52px 0 16px; padding-top:18px; border-top:1px solid var(--line); font-size:clamp(25px,3.4vw,37px); } h3 { margin:30px 0 10px; font-size:22px; }
p { margin:0 0 17px; } ul,ol { margin:0 0 22px; padding-left:23px; } li { margin:7px 0; } strong { font-weight:700; } code { padding:2px 5px; border-radius:3px; background:#eee9dd; font:13px/1.4 'Courier New',monospace; } pre { overflow:auto; margin:24px 0; padding:18px; background:#1f2925; color:#f5f2e9; } pre code { padding:0; color:inherit; background:transparent; } hr { border:0; border-top:1px solid var(--line); margin:28px 0; }
.table-wrap { overflow:auto; margin:24px 0 30px; border:1px solid var(--line); } table { width:100%; border-collapse:collapse; font-size:14px; } th { text-align:left; background:#e9e4d8; font-family:Arial,sans-serif; } th,td { min-width:140px; padding:12px 14px; vertical-align:top; border-bottom:1px solid var(--line); border-right:1px solid var(--line); } tr:last-child td { border-bottom:0; } th:last-child,td:last-child { border-right:0; }
.doc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; } .doc-card { display:block; min-height:185px; padding:22px; color:var(--ink); text-decoration:none; background:#e9e4d8; border:1px solid var(--line); transition:transform .2s ease,background .2s ease; } .doc-card:hover { transform:translateY(-3px); background:#dfd9ca; } .doc-card--accent { background:#dce4dc; } .doc-card--accent:hover { background:#cedbce; } .doc-card b { display:block; margin-bottom:12px; font:700 22px/1.15 Arial,sans-serif; letter-spacing:-.035em; } .doc-card span { color:var(--muted); font:14px/1.45 Arial,sans-serif; }
.lead { max-width:680px; font-size:20px; line-height:1.5; } .checklist-note { margin:26px 0; padding:16px 18px; border-left:4px solid var(--accent); background:#fff4ee; font:14px/1.5 Arial,sans-serif; }
.materials-summary { display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:1px; margin:30px 0; border:1px solid var(--line); background:var(--line); } .materials-summary > div { min-height:96px; padding:17px; background:var(--white); } .materials-summary span { display:block; color:var(--muted); font:11px/1.2 Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; } .materials-summary b { display:block; margin-top:8px; font:700 30px/1 Arial,sans-serif; letter-spacing:-.05em; } .materials-summary i { display:block; height:6px; margin-top:13px; overflow:hidden; background:#e7e1d5; } .materials-summary em { display:block; width:0; height:100%; background:var(--accent); transition:width .25s ease; }
.materials-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:12px; margin:28px 0; } .materials-tools label,.status-control { display:grid; gap:6px; color:var(--muted); font:700 11px/1 Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; } select,.reset-statuses,.admin-action,.admin-submit { min-height:42px; padding:0 11px; border:1px solid var(--line); border-radius:0; color:var(--ink); background:var(--white); font:14px Arial,sans-serif; } .reset-statuses,.admin-action,.admin-submit { align-self:end; cursor:pointer; background:#efe9de; font-weight:700; } .admin-action { background:var(--ink); color:var(--paper); border-color:var(--ink); } select:disabled { color:var(--ink); opacity:1; cursor:default; }
.materials-list { display:grid; gap:14px; } .material-card { padding:22px; border:1px solid var(--line); border-left-width:5px; background:var(--white); } .material-card.critical { border-left-color:#b43d2b; } .material-card.high { border-left-color:#bf7b27; } .material-card.normal { border-left-color:#6a8f71; } .material-card.later { border-left-color:#88918d; } .material-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .material-stage { color:var(--muted); font:12px/1.3 Arial,sans-serif; } .priority { padding:5px 8px; font:700 10px/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.06em; } .priority--critical { color:#852719; background:#ffe8e2; } .priority--high { color:#7d4e12; background:#fff0d9; } .priority--normal { color:#436448; background:#e9f2e9; } .priority--later { color:#525b57; background:#e9ecea; } .material-card h2 { margin:16px 0 12px; padding:0; border:0; font-size:25px; } .material-card p { margin-bottom:9px; font-size:15px; } .material-card .why { color:var(--muted); } .status-control { width:min(300px,100%); margin-top:18px; } .checklist-load-error { padding:18px; border:1px solid #b43d2b; color:#852719; background:#ffe8e2; } .admin-dialog { width:min(440px,calc(100% - 32px)); border:0; padding:0; background:var(--paper); box-shadow:0 20px 70px rgba(0,0,0,.28); } .admin-dialog::backdrop { background:rgba(28,32,29,.55); } .admin-dialog__body { position:relative; display:grid; gap:15px; padding:32px; } .admin-dialog__body h2 { margin:0; padding:0; border:0; } .admin-dialog__body p { margin:0; } .admin-dialog__body label { display:grid; gap:6px; color:var(--muted); font:700 11px/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.06em; } .admin-dialog__body input { min-height:44px; padding:0 11px; border:1px solid var(--line); font:16px Arial,sans-serif; } .admin-dialog__close { position:absolute; top:10px; right:12px; border:0; background:transparent; color:var(--muted); font:28px/1 Arial,sans-serif; cursor:pointer; } .form-error { min-height:20px; color:#852719; font:14px Arial,sans-serif; } .admin-submit { justify-self:start; padding:0 20px; background:var(--ink); color:var(--paper); border-color:var(--ink); }
footer { padding:26px; color:var(--muted); text-align:center; border-top:1px solid var(--line); font:12px/1.4 Arial,sans-serif; }
.admin-global-button,.document-admin-toolbar button { min-height:38px; padding:0 12px; border:1px solid var(--ink); color:var(--paper); background:var(--ink); cursor:pointer; font:700 12px Arial,sans-serif; } .admin-global-button { margin-left:auto; } .document-admin-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 18px; padding:12px; border:1px solid #c7d6cb; background:#edf4ee; font:13px/1.4 Arial,sans-serif; } .document-admin-toolbar[hidden] { display:none !important; } .document-admin-toolbar span { margin-right:auto; } .document-admin-toolbar button[data-cancel] { color:var(--ink); background:var(--white); border-color:var(--line); } .document-content--editing { outline:3px solid #a7c1ac; outline-offset:8px; } .document-content--editing:focus { outline-color:var(--accent); }
@media (max-width:700px) { .topbar { align-items:flex-start; flex-direction:column; } .document { width:100%; margin:0; padding:28px 20px 44px; box-shadow:none; } .doc-grid { grid-template-columns:1fr; } .materials-summary { grid-template-columns:repeat(2,1fr); } .materials-summary > div:first-child { grid-column:1 / -1; } .materials-tools { grid-template-columns:1fr; } h2 { margin-top:38px; } body { font-size:16px; } }