:root { color-scheme:light; --navy:#0f1f3d; --blue:#2563eb; --border:#e5e7eb; --muted:#6b7280; --bg:#f9fafb; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:#1a1f2e; font:14px/1.6 Inter,system-ui,sans-serif; }
a { color:#1d4ed8; } button,input { font:inherit; }
.topbar { background:#fff; border-bottom:1px solid var(--border); }
.topbar nav { min-height:56px; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.brand { color:var(--navy); font:bold 20px 'Playfair Display',Georgia,serif; text-decoration:none; }.brand span { color:var(--blue); }
.platform-links { display:flex; gap:24px; flex-wrap:wrap; }.platform-links a { color:var(--muted); text-decoration:none; }
.app-shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:calc(100vh - 56px); }
.sidebar { background:#fff; border-right:1px solid var(--border); padding:28px 20px; min-width:0; }
.sidebar-name { color:var(--navy); font-weight:600; overflow-wrap:anywhere; margin:8px 0 24px; }.sidebar nav { display:grid; gap:6px; }
.sidebar nav button { text-align:left; border:0; padding:10px 12px; color:var(--muted); }.sidebar nav button[aria-current] { background:#eff6ff; color:#1d4ed8; }
.sidebar-note { font-size:12px; color:var(--muted); margin:28px 0; }.dashboard-link { font-size:13px; }
main { width:100%; max-width:1200px; margin:0 auto; padding:28px 40px 56px; min-width:0; }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:24px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }.breadcrumbs button { padding:0; border:0; background:none; text-align:left; }
h1,h2,h3 { color:var(--navy); font-family:'Playfair Display',Georgia,serif; line-height:1.3; overflow-wrap:anywhere; margin:0 0 12px; }
h1 { font-size:32px; } h2 { font-size:27px; } h3 { font-size:20px; }p { margin:8px 0 16px; }.eyebrow { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.intro { margin-bottom:20px; }.intro p:not(.eyebrow),.muted,#matter-meta,#list-summary,#history-summary { color:var(--muted); }.muted { font-size:12px; }
.disclosure { font-size:12px; color:var(--muted); border-bottom:1px solid var(--border); padding-bottom:16px; }.disclosure summary { color:var(--navy); }.status-area { padding:12px 0 24px; }#status { min-height:1.6em; }#status[data-error="true"] { color:#991b1b; }
.panel { background:#fff; border:1px solid var(--border); border-radius:6px; padding:24px; margin:20px 0; }.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:20px 0 12px; }.section-heading h3 { margin:0; }.panel .section-heading { margin-top:0; }
button { border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--navy); padding:9px 14px; cursor:pointer; }button.primary { background:var(--blue); border-color:var(--blue); color:#fff; }button:hover:not(:disabled) { background:#eff6ff; color:#1d4ed8; border-color:#2563eb; }button:disabled { opacity:.55; cursor:default; }.text-button { padding-left:0; border:0; background:none; }
form { display:grid; gap:10px; max-width:600px; margin:20px 0; }form button { justify-self:start; }label { font-weight:500; }input { width:100%; min-width:0; padding:10px 12px; border:1px solid #9ca3af; border-radius:4px; background:#fff; }
summary { cursor:pointer; font-weight:500; } .actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }.actions a { font-size:12px; }.pagination { margin-top:20px; }
.matter-list { list-style:none; padding:0; margin:16px 0; }.matter-list li+li { border-top:1px solid var(--border); }.matter-list button { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 16px; width:100%; border:0; border-radius:0; padding:18px 8px; text-align:left; }.row-title { font-weight:600; color:var(--navy); overflow-wrap:anywhere; }.row-meta { font-size:12px; color:var(--muted); grid-column:1; overflow-wrap:anywhere; }.row-arrow { grid-column:2; grid-row:1 / 3; align-self:center; color:var(--blue); }.matter-list button[data-status="archived"] .row-title { color:#4b5563; }
.badge { border:1px solid var(--border); background:#fff; border-radius:4px; padding:4px 10px; text-transform:capitalize; font-size:12px; }.badge[data-status="archived"] { background:#f3f4f6; }.activity-list { padding-left:22px; }.activity-list li { padding:12px 0; overflow-wrap:anywhere; }.activity-list li+li { border-top:1px solid var(--border); }
.future { background:transparent; }.future-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; list-style:none; color:var(--muted); font-size:13px; }.future-list li { padding:10px 0; overflow-wrap:anywhere; }.archive-area { border-top:1px solid var(--border); padding-top:12px; }.archive-area p { color:var(--muted); }
:is(a,button,input,summary):focus-visible { outline:3px solid var(--blue); outline-offset:3px; }[tabindex="-1"]:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }.skip-link { position:absolute; left:16px; top:-100px; background:#fff; padding:10px; z-index:10; }.skip-link:focus { top:8px; }[hidden] { display:none !important; }
@media(max-width:1000px) { .app-shell { grid-template-columns:210px minmax(0,1fr); }main { padding:24px; }.sidebar { padding:24px 16px; }.future-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { .app-shell { display:block; }.sidebar { border-right:0; border-bottom:1px solid var(--border); padding:16px 24px; }.sidebar nav { display:flex; flex-wrap:wrap; }.sidebar-name { margin:4px 0 12px; }.sidebar-note,.dashboard-link { display:none; }.sidebar .eyebrow { margin:0; } }
@media(max-width:480px) { main { padding:20px; }.topbar nav,.sidebar { padding:16px 20px; }.platform-links { gap:16px; }h1 { font-size:28px; }h2 { font-size:24px; }.panel { padding:18px; }.future-list { grid-template-columns:1fr; }.section-heading { align-items:flex-start; }.actions button { max-width:100%; white-space:normal; } }
/* M2 uses the existing matter shell, palette and responsive gutters. */
#m2-nav { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.m2-panel .m2-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.m2-summary button { text-align:left; padding:16px; white-space:normal; }
.m2-panel > button { display:block; margin:12px 0; text-align:left; overflow-wrap:anywhere; max-width:100%; }
.m2-panel :is(textarea,select) { font:inherit; width:100%; min-width:0; padding:10px 12px; border:1px solid #9ca3af; border-radius:4px; background:#fff; color:var(--navy); }
.m2-panel textarea { min-height:120px; resize:vertical; }.m2-panel select[multiple] { min-height:120px; }
.m2-panel :is(textarea,select):focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.m2-panel :is(dd,pre,p,summary) { overflow-wrap:anywhere; white-space:pre-wrap; }.m2-panel dd { margin:4px 0 16px; }.m2-panel dt { font-weight:600; }
.m2-panel details { border-top:1px solid var(--border); padding:12px 0; }.m2-panel pre { font:13px/1.6 Inter,system-ui,sans-serif; }
@media(max-width:480px) { .m2-panel .m2-summary { grid-template-columns:1fr; } }
/* Compact matter-first presentation; controllers and data contracts are unchanged. */
.matter-heading h1 { font-size:30px; margin-bottom:6px; }
.matter-heading { margin-top:12px; }.matter-heading p { margin-bottom:0; }
.breadcrumbs { margin-bottom:16px; }.status-area { padding:8px 0 12px; }
.status-area .actions button,.m2-actions button { padding:5px 9px; font-size:12px; }
.disclosure { padding-bottom:10px; }.panel { margin:16px 0; padding:20px; }
.m2-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.m2-toolbar h3 { margin:0 auto 0 0; }.m2-toolbar h3,.m2-panel h4 { font-family:Inter,system-ui,sans-serif; font-weight:600; }
.m2-panel h4 { color:var(--navy); font-size:15px; margin:16px 0 8px; }
.m2-panel .m2-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 8px; }
.summary-card { display:flex; flex-direction:column; gap:6px; border-left:3px solid var(--border); }
.summary-label { color:#4b5563; font-size:12px; }.summary-count { font-size:25px; line-height:1.2; color:var(--navy); }
.summary-card[data-tone="attention"] { border-left-color:#b45309; }
.summary-card[data-tone="review"] { border-left-color:#64748b; }
.summary-card[data-tone="upcoming"] { border-left-color:var(--blue); }
.summary-card[data-tone="complete"] { border-left-color:#047857; }
.attention-list { border-block:1px solid var(--border); padding:4px 0 12px; }
.attention-list button { display:block; width:100%; text-align:left; border:0; padding:8px; overflow-wrap:anywhere; }
.m2-panel .matter-list button { padding:12px 8px; gap:4px 12px; }
.m2-panel .matter-list .badge { grid-column:2; grid-row:1; align-self:start; justify-self:end; font-size:11px; padding:2px 7px; }
.badge[data-status="completed"] { color:#065f46; background:#ecfdf5; }
.badge[data-status="blocked"] { color:#92400e; background:#fffbeb; }
.row-open { grid-column:2; font-size:12px; color:#1d4ed8; align-self:end; }
.record-metadata { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; margin:16px 0; }
.record-metadata > div { min-width:0; }.record-metadata .metadata-wide { grid-column:1 / -1; }
.m2-panel .record-metadata dt { font-size:12px; color:var(--muted); font-weight:500; }
.m2-panel .record-metadata dd { margin:3px 0 0; }
.sidebar nav button[aria-current] { font-weight:600; box-shadow:inset 3px 0 var(--blue); }
@media(max-width:1000px) { .m2-panel .m2-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .m2-panel .m2-summary,.record-metadata { grid-template-columns:1fr; }.matter-heading h1 { font-size:26px; }.m2-toolbar { align-items:flex-start; }.panel { padding:16px; }.m2-panel .matter-list button { grid-template-columns:minmax(0,1fr); }.m2-panel .matter-list .badge,.row-open { grid-column:1; grid-row:auto; justify-self:start; } }
/* Task70: put operational content ahead of secondary help and metadata. */
main { padding-top:18px; }.breadcrumbs { margin-bottom:10px; white-space:nowrap; flex-wrap:nowrap; overflow-x:auto; }
.workspace-help { margin-top:20px; font-size:12px; }.workspace-help > summary { color:var(--navy); padding:6px 0; }
.workspace-help .disclosure,.workspace-help .workspace-controls { margin:10px 0; }
.status-area { padding:0; }.status-area:has(#status[hidden]):not(:has(button:not([hidden]))) { display:none; }
.matter-heading { margin:10px 0; align-items:flex-start; }.matter-heading h1 { font-size:25px; margin-bottom:4px; }
.matter-metadata { font-size:11px; color:var(--muted); }.matter-metadata p { margin:4px 0; }
.m2-panel { margin-top:10px; padding:16px; }.m2-toolbar { margin-bottom:8px; }.m2-toolbar h3 { font-size:18px; }
.m2-panel .m2-summary { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }.m2-summary button { flex:1 1 140px; padding:9px 10px; }
.summary-count { font-size:20px; }.summary-label { font-size:11px; }.summary-card { gap:3px; }
.sidebar nav { gap:2px; }.sidebar nav button { padding:7px 10px; }#m2-nav { margin-top:12px; padding-top:10px; }
.m2-panel .matter-list { margin:8px 0; }.m2-panel .matter-list button { padding:8px; }
.record-metadata { gap:8px 18px; margin:10px 0; }.m2-panel > button { display:inline-block; margin:6px 8px 6px 0; }
.lifecycle-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0; }
.lifecycle-actions label { font-size:12px; }.m2-panel .lifecycle-actions select { width:auto; max-width:100%; padding:5px 8px; }
.lifecycle-actions button { padding:6px 9px; font-size:12px; }.quick-feedback { color:#065f46; }
.m2-panel form { max-width:none; gap:6px; margin:10px 0; }.m2-panel form input,.m2-panel form select { padding:7px 9px; }.m2-panel textarea { min-height:80px; }
@media(max-width:480px) { main { padding-top:12px; }.matter-heading h1 { font-size:23px; }.m2-panel { padding:12px; }.m2-summary button { flex-basis:120px; }.lifecycle-actions { align-items:stretch; }.lifecycle-actions label { flex-basis:100%; } }

/* Task 74: matter directory and explicit-date navigation. */
.product-workspace .directory .row-arrow { font-size:12px; color:var(--ui-action); white-space:nowrap; }
.product-workspace .directory .matter-list button { min-width:0; }
.product-workspace .deadline-list { list-style:none; padding:0; margin:var(--ui-space-4) 0 0; display:grid; gap:var(--ui-space-2); }
.product-workspace .deadline-row { display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:var(--ui-space-3); align-items:center; width:100%; text-align:left; padding:12px; }
.product-workspace .deadline-date { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.product-workspace .deadline-identity { display:grid; gap:var(--ui-space-1); min-width:0; overflow-wrap:anywhere; }
.product-workspace .deadline-row .row-title { font-size:14px; font-weight:600; }
@media(max-width:800px) { .product-workspace .deadline-row { grid-template-columns:90px minmax(0,1fr); } .product-workspace .deadline-row .badge { grid-column:2; justify-self:start; } }
@media(max-width:480px) { .product-workspace .deadline-row { grid-template-columns:minmax(0,1fr); } .product-workspace .deadline-row .badge { grid-column:1; } .product-workspace .directory .row-arrow { white-space:normal; } }

/* Audited record lifecycle: secondary actions and explicit filter state. */
.product-workspace .record-actions { margin:var(--ui-space-2) 0; font-size:12px; }
.product-workspace .record-actions > button { margin-top:var(--ui-space-2); }
.product-workspace [aria-label="Record lifecycle filter"] button[aria-pressed="true"] { background:var(--ui-action-bg); border-color:var(--ui-action); color:var(--ui-ink); }
