:root { --brand:#1d3557; --accent:#e63946; --bg:#f6f7f9; --line:#dfe3e8; --muted:#6b7280; --nav-w:13rem; --nav-navy:#1d3557; --nav-maroon:#7a2e3b; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:#1f2937; }
a { color:var(--brand); }
.topbar { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; background:var(--brand); color:#fff; padding:.5rem 1rem; }
.topbar a { color:#fff; text-decoration:none; font-weight:700; font-size:1.2rem; }
.brand { display:flex; align-items:center; }
.topbar a.logo { display:inline-flex; align-items:center; line-height:1; }
.topbar a.logo img { display:block; height:38px; width:auto; }
.wordmark { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; line-height:1; }
.wordmark img { width:auto; height:1.85rem; max-width:none; }
.wordmark-name { font-family: Georgia, "Times New Roman", serif; font-style:italic; font-weight:700; color:#1e88e6; font-size:1.45rem; letter-spacing:-0.03em; }
.wordmark-lg img { height:3.3rem; }
.wordmark-lg .wordmark-name { font-size:2.7rem; }
.topbar .wordmark-name { color:#1e88e6; font-size:1.35rem; }
.auth-logo .wordmark { justify-content:center; }
.auth-logo .wordmark img { width:auto; max-width:none; height:3.3rem; }
@media (max-width:600px) { .topbar a.logo img { height:28px; } }
.auth-logo { margin:0 0 1.25rem; text-align:center; line-height:0; }
.auth-logo img { width:100%; max-width:289px; height:auto; }
.tenant { margin-left:.75rem; font-weight:400; opacity:.8; font-size:.9rem; }
.roles { display:flex; gap:.25rem; }
.role { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); padding:.2rem .7rem; border-radius:999px; cursor:pointer; font-size:.85rem; }
.role.active { background:var(--accent); border-color:var(--accent); }
.who { font-size:.85rem; display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center; max-width:100%; min-width:0; }
.inline { display:inline; }
button.link { background:none; border:0; color:#fff; text-decoration:underline; cursor:pointer; }
.mainnav { display:flex; flex-wrap:wrap; background:#fff; border-bottom:1px solid var(--line); overflow-x:auto; }
.mainnav a { padding:.7rem 1rem; text-decoration:none; color:#374151; white-space:nowrap; }
.nav-dropdown-menu .nav-label { display:block; padding:.45rem .9rem .15rem; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
#assignment-gate { position: fixed; top: 4.25rem; right: 1rem; z-index: 80; width: min(22rem, calc(100vw - 2rem)); pointer-events: auto; }
#assignment-gate[hidden] { display: none; }
.assignment-alert { background: #dc2626; color: #fff; border: 2px solid #7f1d1d; border-radius: 10px; padding: 14px; box-shadow: 0 12px 28px rgba(127, 29, 29, .45); }
.assignment-alert-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.assignment-alert-head h2 { margin: 0; font-size: 1rem; color: #fff; }
.assignment-count { font-size: .8rem; font-weight: 700; }
.assignment-cards { margin-top: 8px; }
.assignment-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.assignment-card p { margin: .15rem 0; }
.assignment-card a, .assignment-open { color: #fff; font-weight: 700; }
.assignment-kind { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.assignment-actions, .assignment-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.assignment-refuse { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.assignment-refuse input[type=text] { width: auto; flex: 1 1 8rem; color: #111; background: #fff; }
.assignment-alert .btn { background: #fff; color: #991b1b; }
.assignment-alert .btn.danger { background: #450a0a; color: #fff; }
.assignment-alert .assignment-signout { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
@media print { #assignment-gate { display: none; } }
.idle-warning { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.idle-warning[hidden] { display: none; }
.idle-warning-card { background: #fff; color: #111; border: 3px solid #b91c1c; border-radius: 10px; padding: 1.25rem; max-width: 22rem; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.idle-warning-card p { margin: 0 0 .75rem; }
@media print { .idle-warning { display: none; } }
.mainnav a.active { border-bottom:3px solid var(--accent); font-weight:600; }
.nav-ico { width:.78rem; height:.78rem; flex:0 0 .78rem; background:currentColor; border-radius:1px; }
.nav-ico svg { display:none; }
.nav-ico-truck { width:1.15rem; height:1.15rem; flex-basis:1.15rem; border-radius:0; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9 1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9 1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
main { max-width:960px; margin:1rem auto; padding:0 1rem; }
.action-bar { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:.5rem; margin-bottom:.75rem; background:#fff; border:1px solid var(--line); border-radius:6px; }
.action-bar form.inline { display:inline; }
.compare-wrap { overflow-x:auto; }
.compare th[scope=row] { color:var(--muted); font-weight:400; white-space:nowrap; }
.compare td, .compare thead th { vertical-align:top; min-width:12rem; }
.compare .master { background:#f0f7ff; }
.head { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); }
.btn, input[type=submit] { background:var(--brand); color:#fff; border:0; padding:.45rem .9rem; border-radius:4px; text-decoration:none; cursor:pointer; font-size:.9rem; }
.btn.danger { background:#b91c1c; }
.stack { display:grid; gap:.4rem; max-width:480px; }
form.import-options { max-width:42rem; }
form.import-options fieldset { border:1px solid var(--line); border-radius:6px; padding:.75rem .9rem; margin:.2rem 0 .4rem; }
form.import-options legend { font-weight:600; padding:0 .25rem; }
#set-for-all-rows { display:grid; gap:.75rem; }
#set-for-all-rows .hint { font-weight:400; margin:0; }
.default-rows { display:grid; gap:.6rem; }
.default-row { display:grid; grid-template-columns:minmax(11rem,14rem) minmax(0,1fr) auto; gap:.5rem; align-items:start; }
.default-row label { display:grid; gap:.2rem; font-weight:600; }
.default-row select[multiple], .default-row textarea { min-height:6.5rem; font-weight:400; }
.default-row .default-remove { background:none; border:0; color:#9b1c1c; cursor:pointer; font:inherit; padding:.45rem 0; }
#set-for-all-rows .text-add { background:none; border:0; color:var(--brand); cursor:pointer; font:inherit; padding:0; text-align:left; }
@media (max-width:600px) { .default-row { grid-template-columns:1fr; } }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], select, textarea { width:100%; padding:.45rem; border:1px solid var(--line); border-radius:4px; }
.flash { padding:.6rem .8rem; border-radius:4px; background:#e0f2fe; }
.flash.alert { background:#fee2e2; }
.muted { color:var(--muted); }
.fmcsa-refresh-error { color:#991b1b; }
dl { display:grid; grid-template-columns:10rem 1fr; gap:.3rem 1rem; background:#fff; padding:1rem; }
dt { color:var(--muted); }
body.auth main { max-width:380px; margin-top:4rem; background:#fff; padding:1.5rem; border-radius:6px; }
@media (max-width:600px) { dl { grid-template-columns:1fr; } }

/* Contact form */
main:has(.contact-form) { max-width:1100px; }
.contact-form { display:grid; gap:1rem; background:#fff; padding:1rem; border:1px solid var(--line); border-radius:6px; }
.contact-form fieldset { border:1px solid var(--line); border-radius:4px; padding:.6rem .8rem; min-width:0; }
.contact-form { grid-template-columns:minmax(0,1fr); }
.contact-form input[type=url] { width:100%; padding:.45rem; border:1px solid var(--line); border-radius:4px; }
.contact-form legend { font-weight:600; padding:0 .3rem; }
.contact-form .field { display:grid; gap:.25rem; }
.contact-form .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.contact-form .grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.contact-form .row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.4rem; }
.contact-form .row[hidden] { display:none; }
.contact-form .row .short { width:5rem; }
.contact-form .row.addr input { flex:1 1 9rem; }
.contact-form .checks { display:flex; gap:1.5rem; }
.contact-form .form-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.btn.secondary { background:#fff; color:var(--brand); border:1px solid var(--brand); }
.btn.ghost { background:transparent; color:var(--brand); border:1px solid transparent; }
.btn.small { padding:.2rem .6rem; }
button.btn { font-family:inherit; }
.head-actions { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; justify-content:flex-end; }
h2.section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; }
a.btn.create-record { display:inline-flex; align-items:center; justify-content:center; gap:.15rem; font-size:1.05rem; font-weight:700; line-height:1.2; padding:.7rem 1.15rem; border-radius:6px; box-sizing:border-box; white-space:nowrap; }
a.btn.create-record .create-plus { display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; margin-right:.35rem; border-radius:999px; background:rgba(255,255,255,.22); font-size:1.15rem; line-height:1; }
.link-existing-label { color:var(--muted); font-size:.85rem; white-space:nowrap; }
.locked-account-name { margin:0; font-weight:700; }
@media (max-width:700px) {
  .head-actions, h2.section-heading { justify-content:flex-start; width:100%; }
  a.btn.create-record { flex:1 1 100%; }
  form.inline-add { flex-wrap:wrap; }
  form.inline-add .autocomplete, form.inline-add .link-existing-label { flex:1 1 100%; }
}
.notice { background:#fff7ed; border:1px solid #fed7aa; padding:.5rem .7rem; border-radius:4px; }
.photo { width:96px; height:96px; object-fit:cover; border-radius:6px; }
.autocomplete { position:relative; flex:1 1 14rem; }
.autocomplete .suggestions { position:absolute; z-index:10; left:0; right:0; margin:0; padding:0; list-style:none; background:#fff; border:1px solid var(--line); max-height:12rem; overflow:auto; }
.autocomplete .suggestions li { padding:.35rem .5rem; cursor:pointer; }
.autocomplete .suggestions li:hover { background:#eef2f7; }
.reminder .modes { display:flex; gap:.6rem; }
.reminder .disabled { color:var(--muted); }
.log { list-style:none; padding:0; }
.log li { border-left:3px solid var(--line); padding:.2rem .6rem; margin-bottom:.6rem; background:#fff; }
.log-meta { color:var(--muted); font-size:.85rem; }
.rich-content table { border-collapse:collapse; } .rich-content td, .rich-content th { border:1px solid var(--line); padding:.2rem .4rem; }
.rich-content blockquote { border-left:3px solid var(--line); margin-left:0; padding-left:.8rem; }
textarea[data-controller~="richtext"] { width:100%; min-height:8rem; }
textarea[data-richtext-resizable-value="true"] { resize:vertical; overflow:auto; width:100%; max-width:100%; min-height:8rem; }
button.link-danger { background:none; border:0; color:#b91c1c; text-decoration:underline; cursor:pointer; }
@media (max-width:700px) { .contact-form .grid4, .contact-form .grid2 { grid-template-columns:1fr; } }
/* Navigation layouts: left column (default) or top tabs (per-user setting) */
.shell { display:flex; align-items:flex-start; }
.shell > main { flex:1; min-width:0; }
body.nav-left .mainnav { flex-direction:column; flex-wrap:nowrap; width:var(--nav-w); flex:0 0 var(--nav-w); border:2px solid var(--nav-navy); border-radius:8px; background:#fff; overflow-x:visible; position:sticky; top:0; align-self:flex-start; max-height:100vh; overflow-y:auto; z-index:2; }
body.nav-left .mainnav a.active { border-bottom:0; border-left:0; }
html.nav-animate body.nav-left .mainnav.sidebar { transition:margin-left .22s ease; }
html.nav-collapsed body.nav-left .mainnav.sidebar { margin-left:calc(-1 * var(--nav-w)); }
.nav-collapse { position:sticky; top:0; z-index:1; align-self:flex-end; margin:.35rem .45rem .15rem auto; border:1px solid var(--line); background:#fff; border-radius:6px; padding:.15rem .55rem; line-height:1; cursor:pointer; font-size:1.05rem; }
.nav-collapse:focus-visible, .nav-reveal:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.nav-reveal { display:none; border:1px solid rgba(255,255,255,.55); background:transparent; color:#fff; border-radius:6px; padding:.2rem .55rem; line-height:1; font-size:1.1rem; cursor:pointer; margin-right:.45rem; }
html.nav-collapsed body.nav-left .nav-reveal { display:inline-flex; align-items:center; }
body.nav-top .shell { flex-direction:column; align-items:stretch; }
body.nav-top .mainnav { flex-direction:row; }
.plink { font-size:.85rem !important; font-weight:400 !important; text-decoration:underline !important; }
@media (max-width:700px) { body.nav-left .shell { flex-direction:column; align-items:stretch; } body.nav-left .mainnav, html.nav-collapsed body.nav-left .mainnav.sidebar { width:auto; max-height:none; margin-left:0; position:relative; flex:none; flex-direction:row; flex-wrap:wrap; border-radius:0; border-width:0 0 2px; overflow:visible; } .nav-collapse, .nav-reveal { display:none !important; } body.nav-left .nav-fold.is-open { flex:1 1 100%; } }

/* Tasks, notifications, dashboard */
main:has(.task-form), main:has(table.tasks) { max-width:1200px; }
.day-strip { display:flex; gap:.4rem; margin:.8rem 0; overflow-x:auto; }
.day-strip .day { display:flex; flex-direction:column; align-items:center; min-width:5rem; padding:.4rem .6rem; background:#fff; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:#374151; }
.day-strip .day.active { border-color:var(--accent); }
.day-strip .dow { font-size:.75rem; color:var(--muted); text-transform:uppercase; }
.day-strip .count { font-weight:700; font-size:1.1rem; }
.weekday-list { margin:.6rem 0 1rem; }
.weekday-list > summary { font-size:1rem; }
.weekday-list .weekday-board { margin-top:.6rem; }
.weekday-board { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:.4rem; }
.weekday-col { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.4rem .5rem; min-width:0; }
.weekday-col h3 { margin:0 0 .3rem; font-size:.8rem; }
.weekday-col ul { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.weekday-col li { display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.weekday-task { overflow-wrap:anywhere; }
.task-due-date { color:var(--muted); font-size:.75rem; }
@media (max-width:900px) { .weekday-board { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { .weekday-board { grid-template-columns:1fr; } }
.date-picker-button { margin-left:.25rem; padding:.1rem .35rem; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; line-height:1; }
.date-picker-panel { position:fixed; z-index:60; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.16); padding:.45rem; width:16rem; }
.date-picker-bar { display:flex; align-items:center; justify-content:space-between; gap:.3rem; margin-bottom:.3rem; }
.date-picker-bar button { border:0; background:none; cursor:pointer; font-size:1.1rem; padding:.1rem .35rem; }
.date-picker-dow, .date-picker-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:.1rem; text-align:center; }
.date-picker-dow { color:var(--muted); font-size:.7rem; margin-bottom:.15rem; }
.date-picker-day { border:0; background:none; border-radius:4px; padding:.3rem 0; cursor:pointer; font:inherit; }
.date-picker-day:hover, .date-picker-day:focus-visible { background:#eff6ff; outline:none; }
.date-picker-day.is-today { box-shadow:inset 0 0 0 1px var(--accent, #2563eb); }
.date-picker-day.is-outside { color:#9ca3af; }
form.inline.due-inline { display:inline-flex; gap:.35rem; align-items:center; vertical-align:middle; }
.tabs-row { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); margin-bottom:.6rem; }
.tabs-row a { padding:.4rem .2rem; text-decoration:none; color:#374151; }
.tabs-row a.active { border-bottom:3px solid var(--accent); font-weight:600; }
.tabs-row .saved { display:inline-flex; align-items:center; }
.bulk-actions { display:flex; gap:.4rem; margin:.4rem 0; }
.bulk-actions select { width:auto; }
.prio.high { color:#b91c1c; font-weight:700; } .prio.low { color:var(--muted); }
/* Priority colour coding: High = red, Medium = yellow, Low = green. A stripe on the left edge of each task row plus a
   badge on the task page; the priority word is always shown/announced too (never colour alone). */
:root { --prio-red:#dc2626; --prio-yellow:#eab308; --prio-green:#16a34a; --prio-purple:#7c3aed; }
table.tasks tr.prio-row td.prio-stripe, tr.prio-row td.prio-stripe { box-shadow: inset 5px 0 0 var(--prio-stripe, transparent); padding-left:.7rem; }
tr.prio-red { --prio-stripe:var(--prio-red); } tr.prio-yellow { --prio-stripe:var(--prio-yellow); } tr.prio-green { --prio-stripe:var(--prio-green); }
tr.prio-purple { --prio-stripe:var(--prio-purple); }
tr.archived td { color:var(--muted); }
.prio-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600; padding:.1rem .5rem; border-radius:999px; vertical-align:middle; border:1px solid; }
.prio-badge .prio-dot { width:.6rem; height:.6rem; border-radius:50%; background:currentColor; }
.prio-badge.prio-red { color:#991b1b; background:#fee2e2; border-color:var(--prio-red); } .prio-badge.prio-red .prio-dot { background:var(--prio-red); }
.prio-badge.prio-yellow { color:#713f12; background:#fef9c3; border-color:var(--prio-yellow); } .prio-badge.prio-yellow .prio-dot { background:var(--prio-yellow); }
.prio-badge.prio-green { color:#14532d; background:#dcfce7; border-color:var(--prio-green); } .prio-badge.prio-green .prio-dot { background:var(--prio-green); }
.prio-badge.prio-purple { color:#4c1d95; background:#ede9fe; border-color:var(--prio-purple); } .prio-badge.prio-purple .prio-dot { background:var(--prio-purple); }
.prio-card { border-left: 4px solid transparent; padding-left: .45rem; }
.prio-card.prio-purple { border-left-color: var(--prio-purple); } .prio-card.prio-red { border-left-color: var(--prio-red); }
.prio-card.prio-yellow { border-left-color: var(--prio-yellow); } .prio-card.prio-green { border-left-color: var(--prio-green); }
.weekday-board li.prio-card { margin: 0 0 .35rem; }
.prio-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 0; }
.prio.prio-purple, .prio.top { color: #6d28d9; font-weight: 700; }
.person-plan form { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.person-plan label { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.apply-everyone { margin: .4rem 0 0; }
.task-count { display: block; margin: .15rem 0 0; font-size: 1.25rem; font-weight: 700; color: #111; line-height: 1.2; }
.task-count strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.status.archived { color:var(--muted); }
.btn.tiny { padding:.1rem .45rem; font-size:.75rem; }
.row-actions { white-space:nowrap; }
tr.overdue td { background:#fff1f2; }
tr.unread td { background:#eff6ff; }
.status.complete { color:#15803d; }
.panel { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.5rem .8rem; margin:.8rem 0; }
.panel summary { font-weight:600; cursor:pointer; }
/* Settings page: a compact A–Z menu right under the heading; choosing an entry shows only that section. Sections are
   hidden unless selected (.is-selected from ?section= or the settings-menu controller); without JavaScript, :target. */
.settings-title { margin:.2rem 0 .3rem; }
.settings-menu ul { list-style:none; margin:0; padding:0; max-width:20rem; background:#fff; border:1px solid var(--line); border-radius:6px; }
.settings-menu li + li { border-top:1px solid var(--line); }
.settings-menu a { display:block; padding:.28rem .65rem; line-height:1.35; text-decoration:none; color:#1f2937; font-size:.92rem; }
.settings-menu a:hover, .settings-menu a:focus-visible { background:#f1f5f9; color:var(--brand); }
.settings-menu a:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.settings-menu a.settings-menu-page::after { content:" \203A"; color:var(--muted); }
.settings-menu a.is-last::after { content:" \00B7 last opened"; color:var(--muted); font-size:.8rem; }
.settings-section { display:none; margin-top:.3rem; }
.settings-section.is-selected { display:block; }
.settings-page.has-selection .settings-menu { display:none; }
.settings-page:not(.js) .settings-section:target { display:block; }
.settings-page:not(.js):has(.settings-section:target) .settings-menu { display:none; }
.settings-page:not(.js):has(.settings-section:target) .settings-section.is-selected:not(:target) { display:none; }
.settings-back { margin:0 0 .2rem; font-size:.88rem; }
.settings-back a { text-decoration:none; }
.settings-section > h2 { margin:.1rem 0 .4rem; font-size:1.15rem; }
.settings-section > h2:focus { outline:none; }
/* Main-nav Settings dropdown: hangs directly beneath the word Settings. */
.nav-dropdown { position:relative; background:none; border:0; border-radius:0; padding:0; margin:0; }
.nav-dropdown > summary { padding:.7rem 1rem; color:#374151; white-space:nowrap; cursor:pointer; list-style:none; }
.nav-dropdown > summary::-webkit-details-marker { display:none; }
.nav-dropdown > summary::after { content:" \25BE"; font-size:.8em; color:var(--muted); }
.nav-dropdown > summary:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.nav-dropdown.active > summary { font-weight:600; }
.nav-ntf.active > summary { color:var(--brand); font-weight:700; }
body.nav-top .nav-dropdown.active > summary { border-bottom:3px solid var(--accent); }
body.nav-left .nav-dropdown.active > summary { border-left:3px solid var(--accent); }
.nav-dropdown-menu { list-style:none; margin:0; padding:.2rem 0; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  position:absolute; top:100%; left:0; z-index:50; min-width:13rem; max-height:70vh; overflow-y:auto; }
.mainnav .nav-dropdown-menu a { display:block; padding:.22rem .8rem; font-size:.88rem; line-height:1.35; white-space:nowrap; border:0; }
.mainnav .nav-dropdown-menu a:hover, .mainnav .nav-dropdown-menu a:focus-visible { background:#f1f5f9; color:var(--brand); }
.nav-dropdown-all { border-bottom:1px solid var(--line); margin-bottom:.15rem; }
.nav-dropdown-all a { font-weight:600; }
.mainnav:has(.nav-dropdown[open]) { overflow:visible; }
/* Sidebar nav: the list opens in place, directly under "Settings". */
body.nav-left .nav-dropdown-menu { position:static; box-shadow:none; border-width:1px 0; border-radius:0; min-width:0; max-height:none; padding-left:.6rem; }
/* Google Sans Flex, variable weight 400–700 (OFL, app/assets/fonts/OFL.txt). Latin subsets from Google Fonts. */
@font-face { font-family:"Google Sans Flex"; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url("/assets/google-sans-flex-latin-ext-c0203dbc.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Google Sans Flex"; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url("/assets/google-sans-flex-latin-fbcf8ba7.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Style E: Gmail-style rows. White panel, navy outline, light-blue active pill. Width stays 13rem. */
.nav-fold-items { list-style:none; margin:0; padding:0; }
.nav-fold-items[hidden] { display:none !important; }
.nav-caret { width:.42rem; height:.42rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .16s ease; flex:none; }
.nav-fold.is-open > .nav-fold-btn .nav-caret { transform:rotate(225deg); }
body.nav-left .mainnav.sidebar { font-family:"Google Sans Flex",system-ui,sans-serif; }
body.nav-left .nav-fold-items { display:flex; flex-direction:column; }
body.nav-left .nav-fold-items li { margin:0; padding:0; min-width:0; }
body.nav-left .nav-fold-btn { display:flex; width:100%; box-sizing:border-box; align-items:center; justify-content:space-between; gap:.5rem; margin:0; padding:10px 20px 4px; border:0; background:transparent; color:#444746; font-family:"Google Sans Flex",system-ui,sans-serif; font-size:13px; font-weight:500; letter-spacing:normal; text-transform:none; line-height:1.3; cursor:pointer; text-align:left; }
body.nav-left .nav-fold-label { display:flex; align-items:center; gap:10px; min-width:0; }
body.nav-left .nav-fold-name { min-width:0; overflow-wrap:break-word; }
body.nav-left .mainnav.sidebar .nav-ico { width:20px; height:20px; flex:0 0 20px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; border-radius:0; color:inherit; -webkit-mask:none; mask:none; }
body.nav-left .mainnav.sidebar .nav-ico svg { display:block; width:20px; height:20px; }
body.nav-top .nav-fold-btn .nav-ico { display:none; }
body.nav-left .mainnav.sidebar a.nav-link { display:flex; align-items:center; gap:10px; min-height:34px; max-width:100%; min-width:0; box-sizing:border-box; margin:1px 8px; padding:0 12px; border:0; border-radius:16px; background:transparent; color:#1f1f1f; font-family:"Google Sans Flex",system-ui,sans-serif; font-weight:400; font-size:16px; line-height:1.25; white-space:normal; text-decoration:none; }
body.nav-left .mainnav.sidebar a.nav-link .nav-text { min-width:0; overflow-wrap:break-word; }
.nav-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; margin-left:.35rem; padding:0 .35rem; border-radius:999px; background:#d3e3fd; color:#1d3557; font-size:.72rem; font-weight:700; line-height:1.4; vertical-align:middle; }
body.nav-left .mainnav.sidebar a.nav-link.active .nav-count, body.nav-top .nav-fold-items a.nav-link.active .nav-count { background:#1d3557; color:#fff; }
body.nav-left .mainnav.sidebar .nav-fold-items a.nav-link { padding-left:28px; }
body.nav-left .mainnav.sidebar a.nav-link.active { background:#d3e3fd; color:#1f1f1f; font-weight:700; border-radius:16px; }
body.nav-left .mainnav.sidebar a.nav-link:hover { background:#e9eef6; color:#1f1f1f; }
body.nav-left .mainnav.sidebar a.nav-link.active:hover { background:#d3e3fd; color:#1f1f1f; }
body.nav-left .nav-fold-btn:focus-visible, body.nav-left .mainnav.sidebar a.nav-link:focus-visible { outline:2px solid var(--nav-navy); outline-offset:-2px; }
body.nav-left .mainnav.sidebar a.nav-link.active:focus-visible { outline-color:var(--nav-navy); }
body.nav-top .nav-fold { position:relative; }
body.nav-top .nav-fold-btn { display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; padding:.7rem 1rem; color:#374151; font:inherit; cursor:pointer; white-space:nowrap; }
body.nav-top .nav-fold.is-current > .nav-fold-btn, body.nav-top .nav-fold.active > .nav-fold-btn { font-weight:700; border-bottom:3px solid var(--accent); }
body.nav-top .nav-fold-items { position:absolute; top:100%; left:0; z-index:50; min-width:16rem; max-height:70vh; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.12); }
body.nav-top .nav-fold-items a.nav-link { display:flex; align-items:center; gap:.5rem; padding:.4rem .85rem; font-weight:700; color:var(--nav-navy); white-space:nowrap; border:0; }
body.nav-top .nav-fold-items a.nav-link.active { background:var(--nav-navy); color:#fff; border-bottom:0; }
@media (max-width:700px) {
  /* Phone: the nav is a wrapping row, so the list drops full-width beneath the row holding Settings. */
  .mainnav { position:relative; }
  .nav-dropdown { position:static; }
  body.nav-left .nav-dropdown-menu, .nav-dropdown-menu { position:absolute; left:.5rem; right:.5rem; top:auto; min-width:0; max-height:65vh; border-width:1px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.12); padding-left:0; }
  .mainnav .nav-dropdown-menu a { padding:.45rem .9rem; font-size:.95rem; white-space:normal; }
  .settings-menu ul { max-width:none; }
  .settings-menu a { padding:.45rem .7rem; }
}
.btn.disabled { opacity:.5; cursor:not-allowed; }
.task-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0; }
.bell { position:relative; text-decoration:none; }
.bell .badge { position:absolute; top:-.4rem; right:-.7rem; background:var(--accent); color:#fff; border-radius:999px; font-size:.7rem; padding:0 .35rem; }
.flash.banner { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.widgets { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1rem; }
.widget { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.5rem 1rem; }
.widget h2 { font-size:1rem; margin:.2rem 0; }
ul.plain { list-style:none; padding:0; margin:.3rem 0; }
.widget-order { list-style:none; padding:0; } .widget-order li { display:flex; gap:.5rem; align-items:center; padding:.3rem 0; border-bottom:1px solid var(--line); }
.onlyprint { display:none; }
@media print { .noprint, .topbar, .mainnav, .nav-collapse, .nav-reveal { display:none !important; } .onlyprint { display:block; } body { background:#fff; } html.nav-collapsed body.nav-left .mainnav.sidebar { margin-left:0; } }
.log-history { margin-top:.3rem; font-size:.85rem; }
.log-revisions { list-style:none; padding-left:.8rem; }
form.inline { display:inline; }
button.linklike { background:none; border:0; padding:0; color:var(--link, #0b5cad); cursor:pointer; text-decoration:underline; font:inherit; }
/* Settings lists */
.panel table input[type=text] { width:100%; min-width:12rem; }
form.inline-add { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; }
.row .check { display:flex; align-items:center; gap:.25rem; white-space:nowrap; }

/* Search: header box, results, filter chips */
.master-search { display:flex; gap:.4rem; align-items:center; flex:1 1 220px; max-width:420px; }
.master-search input[type=search] { width:100%; }
.search-group h2 { margin:1rem 0 .3rem; font-size:1.05rem; }
.count { display:inline-block; background:var(--line); color:var(--brand); border-radius:10px; padding:0 .5rem; font-size:.8rem; font-weight:600; }
.search-jump { display:flex; gap:.8rem; flex-wrap:wrap; margin:.4rem 0; }
ul.search-results { list-style:none; margin:0; padding:0; }
ul.search-results li { border-bottom:1px solid var(--line); }
a.hit { display:block; padding:.5rem .4rem; color:inherit; text-decoration:none; }
a.hit:hover, a.hit:focus { background:#eef2f7; outline:2px solid var(--brand); outline-offset:-2px; }
.hit-title { display:block; font-weight:600; color:var(--brand); }
.hit-snippet { display:block; color:var(--muted); font-size:.9rem; }
mark { background:#fde68a; color:inherit; padding:0 .1rem; border-radius:2px; }
.chips { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin:.4rem 0; }
.chip { display:inline-flex; gap:.3rem; align-items:center; background:#e0e7ef; border-radius:12px; padding:.1rem .6rem; font-size:.85rem; color:var(--brand); text-decoration:none; }
.chip:hover { background:#cfd8e3; }
.pager { display:flex; gap:.8rem; align-items:center; margin:.6rem 0; }
.list-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .45rem; margin:.35rem 0 .55rem; }
.list-meta .list-count { font-weight:700; }
.list-meta .list-page-size, .list-meta form.list-page-size { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin:0; font-weight:400; color:var(--muted, #5c6b7a); }
.list-meta select.page-size, select.page-size { width:auto; min-width:0; padding:.12rem 1.35rem .12rem .4rem; font-size:.92rem; line-height:1.3; }
/* Site-wide filter toolbar (shared/_filter_bar): search + Search, "Filters (n)" toggle, Clear; the panel starts closed. */
.filter-bar { margin:.5rem 0; }
.filter-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.filter-toolbar input[type=search] { flex:1 1 16rem; width:auto; min-width:0; max-width:32rem; }
.filter-toolbar .btn { white-space:nowrap; line-height:1.4; }
.filters-toggle::after { content:" \25BE"; font-size:.8em; }
.filter-bar.is-open .filters-toggle::after { content:" \25B4"; }
.filters-toggle.has-filters { background:#e0e7ef; }
.filter-count { font-weight:700; }
button.btn:disabled { opacity:.5; cursor:not-allowed; }
.filter-panel { display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:.6rem 1rem; align-items:end;
  margin:.5rem 0 0; padding:.75rem; background:#fff; border:1px solid var(--line); border-radius:6px; }
.filter-panel[hidden] { display:none; }
.filter-panel > label, .filter-panel .filter-field { display:flex; flex-direction:column; gap:.2rem; font-size:.85rem; color:var(--muted); min-width:0; }
.filter-panel > label.inline-check { flex-direction:row; align-items:center; gap:.4rem; color:inherit; font-size:.9rem; padding-bottom:.45rem; }
.filter-panel select, .filter-panel input[type=text], .filter-panel input[type=date] { width:100%; padding:.45rem; border:1px solid var(--line); border-radius:4px; color:#1f2937; font-size:.9rem; box-sizing:border-box; }
.filter-panel select { background:#fff; }
.filter-panel .autocomplete { flex:0 0 auto; }
.filter-panel fieldset { grid-column:1 / -1; margin:0; }
.filter-panel-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; }
@media (max-width:600px) {
  .filter-toolbar input[type=search] { flex-basis:100%; max-width:none; }
  .filter-toolbar .btn { flex:1 1 auto; text-align:center; }
  .filter-panel { grid-template-columns:1fr; }
  .filter-panel-actions .btn { width:100%; }
}
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Saved filters + import */
.saved-filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .5rem 0; }
.saved-filters .manage-filters { flex-basis: 100%; }
.saved-filters .saved { display: flex; gap: .5rem; align-items: center; margin: .25rem 0; }
.import-steps { display: flex; gap: 1rem; list-style: none; padding: 0; margin: .5rem 0 1rem; color: #667; }
.import-steps .current { font-weight: 600; color: inherit; }
.import-box { border: 2px dashed #94a3b8; border-radius: 8px; padding: 1rem 1.25rem; background: #f8fafc; }
.import-box.drag-over { border-color: #2563eb; background: #eff6ff; }
.import-chips, .import-fields { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 1rem; }
.import-chip, .import-field { border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; padding: .2rem .6rem; }
.import-chip { cursor: grab; }
.import-field { border-style: dashed; cursor: copy; }
.import-field.over { border-style: solid; border-color: #15803d; background: #f0fdf4; }
.import-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.comm-more > summary, .comm-quote > summary { cursor: pointer; color: #1d4ed8; }
.comm-more[open] .comm-excerpt, .comm-more[open] .comm-more-label { display: none; }
.comm-excerpt { color: inherit; }
.comm-full, .comm-quoted { margin-top: .4rem; }
.progress { background: #e5e7eb; border-radius: 4px; height: 12px; max-width: 420px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: #2563eb; }
.row-error { color: #b91c1c; }
.row-warning { color: #92400e; }

/* Calendar */
.cal-toolbar { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between; margin:.4rem 0; }
.cal-title { margin:0; font-size:1.15rem; flex:1 1 auto; text-align:center; }
.cal-nav, .cal-views { display:flex; gap:.3rem; }
.cal-legend { font-size:.8rem; }
.cal-key { display:inline-block; width:.8rem; height:.8rem; border-radius:2px; vertical-align:middle; margin-left:.4rem; }
.cal-key.appt { background:#2563eb; } .cal-key.task { background:#fff; border:2px dashed #b45309; }
.cal-month { border:1px solid var(--line); background:#fff; }
.cal-row { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); }
.cal-head > div { padding:.3rem; font-weight:600; text-align:center; background:#f1f5f9; border-bottom:1px solid var(--line); }
.cal-day { min-height:6.5rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:.2rem; overflow:hidden; cursor:pointer; position:relative; }
.cal-day:last-child { border-right:0; }
.cal-day.other { background:#f8fafc; color:var(--muted); }
.cal-day.today { background:#eff6ff; outline:2px solid var(--brand); outline-offset:-2px; }
.cal-daynum { display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.cal-add { text-decoration:none; font-weight:700; padding:0 .35rem; border-radius:4px; opacity:.55; }
.cal-add:hover, .cal-add:focus { opacity:1; background:#e0e7ef; }
.cal-item { display:block; font-size:.8rem; padding:.05rem .3rem; margin:.1rem 0; border-radius:3px; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-item.appt { background:#dbeafe; color:#1e3a8a; border-left:3px solid #2563eb; }
.cal-item.task { background:#fff; color:#92400e; border:1px dashed #b45309; }
.cal-item.task.done { text-decoration:line-through; opacity:.6; }
.cal-item:hover, .cal-item:focus { outline:2px solid var(--brand); }
.cal-time { font-weight:600; }
.cal-more { font-size:.75rem; }
.cal-count { display:none; }
.cal-scroll { overflow-x:auto; }
table.cal-grid { width:100%; border-collapse:collapse; background:#fff; table-layout:fixed; min-width:42rem; }
table.cal-grid th, table.cal-grid td { border:1px solid var(--line); padding:.15rem .25rem; vertical-align:top; }
table.cal-grid thead th { background:#f1f5f9; } table.cal-grid th[scope=row] { width:4.5rem; font-weight:500; font-size:.75rem; text-align:right; color:var(--muted); }
table.cal-grid td { height:2.2rem; } table.cal-grid th.today, table.cal-grid td.today { background:#eff6ff; }
.cal-agenda-day h3 { margin:1rem 0 .2rem; border-bottom:1px solid var(--line); } .cal-agenda-day h3.today { color:var(--brand); }
.cal-list-bar { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; margin:.3rem 0 .6rem; }
.cal-list-bar .cal-ranges { margin:0; flex:1 1 auto; }
.cal-list-search { display:flex; gap:.3rem; align-items:center; } .cal-list-search input[type=search] { width:14rem; max-width:100%; }
.cal-list { margin:0; padding:0; border:1px solid var(--line); background:#fff; border-radius:4px; }
.cl-row { display:grid; grid-template-columns:7.5rem 4.5rem minmax(0, 1fr) minmax(0, 12rem); gap:.2rem .8rem; padding:.45rem .6rem; border-bottom:1px solid var(--line); align-items:baseline; }
.cl-row:last-child { border-bottom:0; }
.cl-row.today { background:#eff6ff; } .cl-row.past { color:var(--muted); } .cl-row.done .cl-title { text-decoration:line-through; }
.cl-date { font-weight:600; white-space:nowrap; } .cl-time { font-weight:600; color:#1e3a8a; white-space:nowrap; font-size:.9rem; }
.cl-main { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.cl-title { font-weight:600; text-decoration:none; } a.cl-title:hover { text-decoration:underline; }
.cl-kind { font-size:.72rem; font-weight:600; padding:0 .35rem; border-radius:3px; background:#fef3c7; color:#92400e; vertical-align:middle; }
.cl-kind.gcal { background:#dcfce7; color:#166534; }
.cl-desc { font-size:.88rem; color:#374151; overflow-wrap:anywhere; } details.cl-desc summary { cursor:pointer; } details.cl-desc[open] summary { display:none; }
.cl-desc p { margin:.2rem 0; } .cl-loc { font-size:.8rem; }
.cl-links { display:flex; flex-direction:column; font-size:.85rem; min-width:0; overflow-wrap:anywhere; }
@media (max-width: 640px) {
  .cl-row { grid-template-columns:auto 1fr; }
  .cl-main, .cl-links { grid-column:1 / -1; } .cl-links { flex-direction:row; flex-wrap:wrap; gap:.6rem; }
  .cal-list-search { flex:1 1 100%; } .cal-list-search input[type=search] { flex:1; width:auto; }
}
.event-form .check { display:inline-flex; align-items:center; gap:.3rem; margin-right:.8rem; }
@media (max-width: 640px) {
  .cal-day { min-height:3.2rem; }
  .cal-day .cal-item, .cal-day .cal-more { display:none; }
  .cal-count { display:inline-block; position:absolute; bottom:.15rem; left:.3rem; background:#2563eb; color:#fff; border-radius:999px; font-size:.7rem; padding:0 .4rem; }
  .cal-title { flex-basis:100%; order:3; }
}

/* Thumbnails: fixed size so lists don't shift while images load. Initials avatars are pure CSS (no external calls). */
.avatar { display:inline-flex; align-items:center; justify-content:center; flex:none; vertical-align:middle; overflow:hidden;
  font-weight:600; color:#fff; background:#475569; object-fit:cover; margin-right:.5rem; }
.avatar-sm { width:40px; height:40px; font-size:.95rem; }
.avatar-lg { width:96px; height:96px; font-size:2rem; margin:0 0 .5rem; }
.avatar-round { border-radius:50%; }
.avatar-square { border-radius:6px; }
.avatar-img { background:#e2e8f0; }
.avatar-c0 { background:#1d4ed8; } .avatar-c1 { background:#0f766e; } .avatar-c2 { background:#b91c1c; } .avatar-c3 { background:#7e22ce; }
.avatar-c4 { background:#b45309; } .avatar-c5 { background:#0369a1; } .avatar-c6 { background:#4d7c0f; } .avatar-c7 { background:#be185d; }
.avatar-c8 { background:#4338ca; } .avatar-c9 { background:#475569; } .avatar-c10 { background:#a21caf; } .avatar-c11 { background:#15803d; }
td .avatar + a { vertical-align:middle; }

/* Teammate calendar overlays: eight distinct colours (stable per person). */
.cal-overlay fieldset { border:1px solid #d1d5db; border-radius:6px; padding:.3rem .6rem; margin:.4rem 0; }
.cal-overlay legend { font-size:.8rem; color:#4b5563; padding:0 .3rem; }
.ov-choice { display:inline-block; margin-right:1rem; }
.cal-item.ov { cursor:default; opacity:.95; font-style:italic; }
.cal-item.ov.ov-0, .cal-key.ov-0 { background:#fde68a; border-left:3px solid #d97706; color:#78350f; }
.cal-item.ov.ov-1, .cal-key.ov-1 { background:#bbf7d0; border-left:3px solid #16a34a; color:#14532d; }
.cal-item.ov.ov-2, .cal-key.ov-2 { background:#fbcfe8; border-left:3px solid #db2777; color:#831843; }
.cal-item.ov.ov-3, .cal-key.ov-3 { background:#ddd6fe; border-left:3px solid #7c3aed; color:#4c1d95; }
.cal-item.ov.ov-4, .cal-key.ov-4 { background:#fecaca; border-left:3px solid #dc2626; color:#7f1d1d; }
.cal-item.ov.ov-5, .cal-key.ov-5 { background:#a5f3fc; border-left:3px solid #0891b2; color:#164e63; }
.cal-item.ov.ov-6, .cal-key.ov-6 { background:#e5e7eb; border-left:3px solid #4b5563; color:#111827; }
.cal-item.ov.ov-7, .cal-key.ov-7 { background:#fed7aa; border-left:3px solid #ea580c; color:#7c2d12; }

/* Per-user email settings: signature preview + insert controls next to log editors */
.signature-layout { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:1rem; align-items:start; }
.signature-preview { border:1px dashed var(--line); padding:.8rem 1rem; background:#fff; color:#111827; font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
.signature-preview p { margin:.15rem 0; }
.signature-editor .tox-tinymce { width:100% !important; }
.signature-logo-field .logo-preview { width:auto; max-width:200px; object-fit:contain; }
.signature-logo { margin:.3rem 0; }
img.signature-logo-img { display:block; height:auto; max-width:100%; }
.rich-content table.sig-logo-layout td, table.sig-logo-layout td { border:0; padding:0 12px 0 0; vertical-align:top; }
.signature-list { display:grid; gap:.8rem; }
.signature-card { border:1px solid var(--line); border-radius:6px; padding:.6rem .8rem; background:#fff; }
.signature-card-head { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.4rem; }
.signature-actions { margin-left:auto; display:flex; gap:.4rem; align-items:center; }
.signature-picker { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.signature-picker select { width:auto; max-width:100%; }
.editor-inserts { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.3rem 0; }
.editor-inserts select { width:auto; max-width:100%; }
@media (max-width:700px) { .signature-layout { grid-template-columns:1fr; } }

/* Shared contact row (task linked contacts, account Contacts): legacy 444CRM order, one compact line that wraps */
ul.contact-rows { list-style:none; margin:.3rem 0; padding:0; background:#fff; border:1px solid var(--line); border-radius:6px; }
.contact-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .9rem; padding:.35rem .6rem; border-bottom:1px solid var(--line); font-size:.9rem; }
.contact-row:last-child { border-bottom:0; }
.contact-row a { text-decoration:none; } .contact-row a:hover, .contact-row a:focus { text-decoration:underline; }
.contact-row .cr-gmail, .contact-row .cr-email, .contact-row .cr-sms { white-space:nowrap; }
.contact-row .cr-name { font-weight:600; } .contact-row .cr-name .contact-title { font-weight:400; }
.buyer-badge { display:inline-block; margin-left:.35rem; font-size:.75rem; font-weight:700; letter-spacing:.02em; padding:.05rem .45rem; border-radius:999px; background:#dbeafe; color:#1e3a8a; border:1px solid #93c5fd; vertical-align:middle; }
.buyer-toggle { display:inline-flex; align-items:center; margin-left:.35rem; }
.buyer-check { display:inline-flex; align-items:center; gap:.3rem; font-weight:600; white-space:nowrap; }
.task-form .buyer-check { margin-left:.4rem; }
.contact-row .cr-address { flex:1 1 14rem; min-width:0; color:#374151; }
.contact-row .cr-phone { white-space:nowrap; }
.phone-call { white-space:nowrap; }
.phone-link { text-decoration:none; }
.phone-link:hover, .phone-link:focus-visible { text-decoration:underline; }
.phone-icon, .phone-copy-icon { width:.95em; height:.95em; vertical-align:-.12em; }
.phone-icon { margin-right:.15em; }
.phone-copy { background:none; border:0; padding:0 .2rem; margin-left:.1rem; cursor:pointer; color:inherit; line-height:1; }
.phone-copy:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.phone-sheet { position:fixed; z-index:80; background:#fff; color:#111827; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); min-width:12.5rem; padding:.3rem; display:flex; flex-direction:column; }
.phone-sheet button, .phone-sheet a { display:block; width:100%; text-align:left; background:none; border:0; padding:.7rem .85rem; font:inherit; color:inherit; text-decoration:none; border-radius:8px; cursor:pointer; }
.phone-sheet button:hover, .phone-sheet a:hover, .phone-sheet button:focus-visible, .phone-sheet a:focus-visible { background:#f1f5f9; }
.phone-toast { position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); background:#111827; color:#fff; padding:.65rem 1rem; border-radius:8px; z-index:90; max-width:min(28rem, calc(100% - 2rem)); }
.phone-toast:empty { display:none; }
a[x-apple-data-detectors] { color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important; }
.contact-row .cr-label { color:var(--muted); font-size:.75rem; font-weight:600; letter-spacing:.02em; }
.contact-row form.inline { margin-left:auto; }
@media (max-width:600px) { .contact-row { gap:.1rem .7rem; } .contact-row .cr-address { flex-basis:100%; } }

/* Smart paste (bulk import from pasted text) */
.smart-paste-panel { margin:.5rem 0 1rem; border:1px solid var(--line); border-radius:6px; background:#fff; padding:.4rem .8rem; }
.smart-paste-panel > summary { cursor:pointer; font-weight:600; padding:.3rem 0; }
.smart-paste-kinds { display:flex; gap:.8rem; margin:.3rem 0 .8rem; }
.smart-paste-kinds a.current { font-weight:700; text-decoration:none; border-bottom:2px solid var(--brand); }
.smart-paste textarea { width:100%; box-sizing:border-box; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85rem; }
.smart-paste .dropzone { border:2px dashed var(--line); border-radius:6px; padding:.8rem; margin:.4rem 0; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; background:#f8fafc; }
.smart-paste .dropzone.dragging { border-color:var(--brand); background:#eff6ff; }
.media-drop-zone { border:2px dashed var(--line); border-radius:6px; padding:.8rem; margin:.4rem 0; background:#f8fafc; cursor:pointer; }
.media-drop-zone.is-over { border-color:var(--brand); background:#eff6ff; }
.media-drop-prompt { margin:0 0 .35rem; }
.media-drop-file, .inline-description { display:flex; flex-wrap:wrap; gap:.4rem .7rem; align-items:center; margin:.35rem 0; }
.media-drop-thumb, .image-drop-thumb { width:48px; height:48px; object-fit:cover; border-radius:4px; background:#e5e7eb; }
.media-drop-file progress, .image-drop-file progress { width:5rem; height:.45rem; }
.media-drop-error, .upload-error { color:var(--accent); margin:.2rem 0; }
.image-drop-queue, .picture-upload-queue { display:flex; flex-direction:column; gap:.2rem; }
.image-drop-file { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; margin:.3rem 0; }
.media-description { color:var(--muted); }
.smart-paste-actions { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin:.4rem 0; }
.smart-paste-status:empty { display:none; }
.smart-paste-status { margin:.4rem 0; }
.smart-paste-status ul { margin:.2rem 0 0 1rem; padding:0; }
.table-scroll { overflow-x:auto; }
table.smart-paste-table { font-size:.85rem; min-width:70rem; }
table.smart-paste-table td, table.smart-paste-table th { vertical-align:top; padding:.3rem; border-bottom:1px solid var(--line); text-align:left; }
table.smart-paste-table input, table.smart-paste-table select, table.smart-paste-table textarea { width:100%; box-sizing:border-box; min-width:6rem; margin-bottom:.2rem; }
table.smart-paste-table td.sp-stack { min-width:11rem; }
table.smart-paste-table td.sp-phones { min-width:17rem; }
main:has(.smart-paste-table) { max-width:1400px; }
table.smart-paste-table .phone-cell { display:grid; grid-template-columns:6rem 1fr 3.5rem; gap:.2rem; }
table.smart-paste-table .phone-cell input, table.smart-paste-table .phone-cell select { min-width:0; }
table.smart-paste-table td.row-warnings { color:#92400e; padding-top:0; }
table.smart-paste-table tr:has(+ tr.row-warnings-row) td { border-bottom:0; }
table.smart-paste-table td.row-num { white-space:nowrap; }
table.smart-paste-table td.row-warnings ul { margin:0; padding-left:1rem; }
table.smart-paste-table td.row-warnings li.error { color:#b91c1c; font-weight:600; }
table.smart-paste-table tbody.has-errors td { background:#fef2f2; }

/* AI email writer ("✨ Draft with AI") */
.ai-draft { border:1px dashed var(--line); border-radius:6px; padding:.6rem .8rem; background:#faf5ff; }
.ai-draft-row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.ai-draft-row input[type=text] { flex:1 1 14rem; }
.ai-draft-status { margin:.4rem 0 0; font-size:.9em; }
.ai-draft-status.error { color:#b91c1c; }

/* 🎤 voice dictation (dictation_controller.js). Hidden unless the browser supports speech recognition. */
.dictation { display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.dictation[hidden] { display:none; }
.dictation-button { border:1px solid var(--line); background:#fff; border-radius:999px; width:2rem; height:2rem; padding:0;
  line-height:1; font-size:1rem; cursor:pointer; }
.dictation-button:hover { background:#f3f4f6; }
.dictation.recording .dictation-button { background:#dc2626; border-color:#dc2626; color:#fff; animation:dictation-pulse 1.2s ease-in-out infinite; }
.dictation-status { font-size:.85em; }
.dictation-status:empty { display:none; }
.dictation-status.error { color:#b91c1c; }
@keyframes dictation-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.55); } 50% { box-shadow:0 0 0 .4rem rgba(220,38,38,0); } }
@media (prefers-reduced-motion: reduce) { .dictation.recording .dictation-button { animation:none; } }

/* Tasks: compact due date + reminders group (task form and the inline editor on the task page) */
.contact-form .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
@media (max-width:700px) { .contact-form .grid3 { grid-template-columns:1fr; } }
.sched { display:grid; gap:.3rem; font-size:.875rem; }
.sched-due, .sched-reminder { display:flex; flex-wrap:wrap; gap:.3rem .5rem; align-items:center; }
.sched-reminder[hidden] { display:none; }
.sched-label { font-weight:600; }
.sched input, .sched select { width:auto; padding:.2rem .35rem; font-size:.85rem; border:1px solid var(--line); border-radius:4px; }
.sched .sched-dt { width:12.5rem; max-width:100%; }
.sched .sched-who { max-width:11rem; }
.sched .sched-note { flex:1 1 5rem; min-width:4rem; width:6rem; }
.sched-fieldset, .sched-form { min-width:0; }
.sched-tail { display:inline-flex; flex:1 1 17rem; gap:.3rem .5rem; align-items:center; min-width:0; }
.sched-modes, .sched-repeat { display:inline-flex; flex-wrap:wrap; gap:.15rem .55rem; align-items:center; }
.sched label { display:inline-flex; align-items:center; gap:.2rem; white-space:nowrap; }
.sched-reminder { padding:.2rem .3rem; border-left:2px solid var(--line); }
.sched-view { display:flex; flex-wrap:wrap; gap:.25rem .6rem; align-items:center; }
.sched-view.editing { display:block; }
.sched-view .overdue { color:#b91c1c; }
.sched-chips { display:flex; flex-wrap:wrap; gap:.25rem; list-style:none; margin:0; padding:0; }
.sched-chips .chip { font-size:.8rem; background:#eef2f7; border-radius:999px; padding:.05rem .55rem; }
.sched-chips .chip.done { opacity:.6; }
.sched-form { display:grid; gap:.4rem; }
.sched-buttons { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
@media (max-width:600px) { .sched .sched-dt { width:100%; } .sched-tail { flex-basis:100%; } }

/* Task page: a long description collapses to a few lines (expandable_text_controller.js). The full HTML stays in the
   page; only the preview is clipped. Short descriptions never get the button. */
dd { min-width:0; }
.task-description, .task-description .rich-content { max-height:none; overflow:visible; height:auto; overflow-wrap:anywhere; }
.task-description img { max-width:100%; height:auto; }
.task-description pre { white-space:pre-wrap; }
.task-description table { width:auto; max-width:100%; }
.task-description .expandable-text { display:grid; justify-items:start; gap:.35rem; min-width:0; }
.task-description .expandable-text-body.is-collapsed {
  max-height:calc(var(--expandable-lines, 5) * 1.25em + .3em);
  overflow:hidden;
}
@media screen {
  /* Pack block margins only while collapsed, so the preview is about 5 lines rather than a few tall paragraphs. */
  .task-description .expandable-text-body.is-collapsed :is(p, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, pre) { margin-block:.1em; }
}
.task-description .expandable-text-toggle { display:inline-flex; align-items:center; gap:.35rem; margin:0; padding:0; border:0; background:none; color:var(--brand); font:inherit; font-weight:600; cursor:pointer; }
.task-description .expandable-text-toggle[hidden] { display:none; }
.task-description .expandable-text-toggle:hover { text-decoration:underline; }
.task-description .expandable-text-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }
.task-description .expandable-chevron { width:.45rem; height:.45rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-.2rem; flex:0 0 auto; transition:transform .15s ease; }
.task-description .expandable-text-toggle[aria-expanded="true"] .expandable-chevron { transform:rotate(-135deg); margin-top:.15rem; }
@media (prefers-reduced-motion: reduce) { .task-description .expandable-chevron { transition:none; } }
@media print {
  .task-description .expandable-text-body.is-collapsed { max-height:none; overflow:visible; }
  .task-description .expandable-text-toggle { display:none; }
}

/* On-screen notification popup (bottom-right corner, every page). Kept compact and BELOW overlays, drawers and the
   What's next panel (z-index 15 < 20); "–" minimizes it to a small pill (always the default on phones) so it never
   covers the page it sits on. */
.notif-popup { position:fixed; right:1rem; bottom:1rem; z-index:15; width:21rem; max-width:calc(100vw - 2rem); max-height:min(42vh, 22rem); overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:.5rem .7rem; font-size:.84rem; }
.notif-popup header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.3rem; gap:.5rem; }
.notif-popup .np-head-actions { display:flex; align-items:center; gap:.5rem; }
.notif-popup .np-min { border:0; background:none; font-size:1.2rem; line-height:1; padding:0 .25rem; cursor:pointer; color:var(--muted); }
.notif-popup .np-min:hover { color:var(--brand); }
.notif-popup ul { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.notif-popup-item { display:grid; gap:.1rem; border-top:1px solid var(--line); padding-top:.35rem; }
.notif-popup .np-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.notif-popup .np-actions { display:flex; flex-wrap:wrap; gap:.3rem; }
.notif-popup .np-actions .btn.small { padding:.12rem .5rem; font-size:.75rem; }
.notif-popup .np-body { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-popup .np-more { margin:.4rem 0 0; }
.notif-popup button.link { color:var(--brand); padding:0; margin-top:.3rem; }
.notif-popup .np-pill { display:none; }
.notif-popup.is-min { width:auto; max-height:none; overflow:visible; padding:0; border:0; background:none; box-shadow:none; }
.notif-popup.is-min > :not(.np-pill) { display:none !important; }
.notif-popup.is-min .np-pill { display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:999px;
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.18); padding:.35rem .8rem; font:inherit; font-weight:600; cursor:pointer; }
/* Room at the end of the page so its last rows can be scrolled clear of the corner popup. */
body:has(.notif-popup) main { padding-bottom:4.5rem; }
@media (max-width:600px) {
  .notif-popup { right:.5rem; left:.5rem; bottom:.5rem; width:auto; max-width:none; max-height:55vh; }
  .notif-popup.is-min { left:auto; }
}
@media print { .notif-popup { display:none; } }
/* Account logo field: drop / browse / paste zone (logo_field_controller.js) */
.logo-field .logo-drop { display:flex; align-items:center; gap:.8rem; min-height:96px; padding:.6rem .8rem; border:2px dashed var(--line); border-radius:6px; background:#f8fafc; cursor:pointer; }
.logo-field .logo-drop:focus { outline:2px solid var(--brand); outline-offset:2px; }
.logo-field .logo-drop.dragging { border-color:var(--brand); background:#eff6ff; }
.logo-field .logo-preview { width:96px; height:96px; object-fit:contain; border-radius:6px; background:#fff; border:1px solid var(--line); }
.logo-field .logo-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.4rem 0; }
.logo-field-js .logo-input, .logo-field-js .logo-remove-box { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.logo-field .logo-status:empty { display:none; }
.logo-field .logo-status.error, .sp-logo-status.error { color:#b91c1c; }
.avatar-img.avatar-square { object-fit:contain; }
/* Smart paste: detected image shown as the "Logo" */
.sp-logo { display:flex; align-items:center; gap:.5rem; margin:.4rem 0; padding:.3rem .5rem; border:1px solid var(--line); border-radius:6px; background:#fff; width:max-content; }
.sp-logo img { width:48px; height:48px; object-fit:contain; border-radius:4px; background:#f1f5f9; }
.sp-logo[hidden] { display:none; }
table.smart-paste-table td.sp-logo-cell { min-width:5.5rem; text-align:center; }
table.smart-paste-table td.sp-logo-cell input[type=radio] { width:auto; min-width:0; }
table.smart-paste-table td.sp-logo-cell img { display:block; width:40px; height:40px; object-fit:contain; margin:.2rem auto; border-radius:4px; background:#f1f5f9; }
table.smart-paste-table tbody.logo-drop-target { outline:2px dashed var(--brand); }
h1.account-title { display:flex; align-items:center; gap:.8rem; }
h1.account-title .avatar-lg { margin:0; }
table.smart-paste-table td.sp-logo-cell img[hidden], .logo-field .logo-preview[hidden] { display:none; }
.logo-field .logo-hint { display:none; font-size:.85rem; }
.logo-field .logo-drop.has-logo .logo-hint { display:inline; }

/* Settings > Google Integration: connected Google accounts */
.google-accounts { width:100%; border-collapse:collapse; }
.google-accounts th, .google-accounts td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid #e5e7eb; vertical-align:top; }
.google-accounts .ga-default { color:#1e3a8a; background:#dbeafe; border-color:#93c5fd; }
.google-accounts .ga-feature { margin-bottom:.25rem; }
.google-accounts .ga-actions form { margin:0 .2rem .2rem 0; }
/* Settings > Email Integration: one card per provider (Google, Outlook, iCloud coming soon). */
.email-providers { list-style:none; padding:0; margin:.5rem 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.75rem; }
.email-provider { margin:0; padding:.75rem 1rem; }
.email-provider h3 { margin:0 0 .35rem; font-size:1.05rem; }
.email-provider p { margin:.25rem 0; }
.email-provider[data-state="coming-soon"] { opacity:.7; }
.ep-accounts { list-style:none; padding:0; margin:.25rem 0; }
.ep-account { margin:.2rem 0; overflow-wrap:anywhere; }
.ep-account-status { display:block; font-size:.8rem; }
.ep-account-status.ep-ok { color:#1f7a3a; }
.ep-account-status.ep-partial { color:#8a6d00; }
.ep-account-status.ep-error { color:#b42318; font-weight:600; }
.ep-default-form { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.5rem 0; }
.ep-default-form select { max-width:100%; }
@media (max-width: 640px) { .google-accounts thead { display:none; } .google-accounts tr, .google-accounts td { display:block; } }
/* Google Calendar: read-only overlay on the Calendar page + per-account sync settings */
.cal-item.ov.gcal, .cal-key.gcal { background:#e0f2fe; border-left:3px solid #0284c7; color:#0c4a6e; }
a.cal-item.ov.gcal { cursor:pointer; }
.cal-google { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.4rem 0; }
.cal-google .flash { flex-basis:100%; margin:.2rem 0; }
.google-accounts .ga-calendar { margin:.25rem 0 0 1.1rem; }

/* "Are you sure?" dialog (shared/_confirm_dialog, confirm_dialog_controller.js) */
dialog.confirm-dialog { border:0; border-radius:8px; padding:1.25rem 1.4rem 1rem; max-width:min(28rem, calc(100vw - 2rem)); box-shadow:0 12px 40px rgba(0,0,0,.25); }
dialog.confirm-dialog::backdrop { background:rgba(15,23,42,.45); }
dialog.confirm-dialog h2 { margin:0 0 .5rem; font-size:1.1rem; }
dialog.confirm-dialog p { margin:0 0 1.1rem; line-height:1.45; overflow-wrap:anywhere; }
.confirm-dialog-actions { display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; }
.confirm-dialog-actions .btn:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }

/* Signature logo width (slider + number) and the shared crop / resize dialog (image_crop_controller.js) */
.signature-logo-options { align-items:start; }
.logo-width-row { display:flex; align-items:center; gap:.5rem; }
.logo-width-row input[type=range] { flex:1 1 auto; min-width:0; width:auto; accent-color:var(--brand); }
.logo-width-row input[type=range][hidden] { display:none; }
.logo-width-row input.logo-width-number { width:5.5rem; flex:0 0 auto; padding:.45rem; border:1px solid var(--line); border-radius:4px; }
dialog.crop-dialog { border:0; border-radius:8px; padding:1rem 1.2rem; width:min(44rem, calc(100vw - 1rem)); max-width:calc(100vw - 1rem); max-height:calc(100dvh - 1rem); overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.25); box-sizing:border-box; }
dialog.crop-dialog::backdrop { background:rgba(15,23,42,.55); }
dialog.crop-dialog h2 { margin:0 0 .3rem; font-size:1.1rem; }
dialog.crop-dialog .crop-help { margin:0 0 .6rem; font-size:.85rem; }
.crop-stage { position:relative; width:fit-content; max-width:100%; margin:0 auto; line-height:0; touch-action:none; user-select:none; -webkit-user-select:none; overflow:hidden; cursor:crosshair;
  background:repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; }
.crop-stage .crop-image { display:block; max-width:100%; max-height:min(55vh, 460px); width:auto; height:auto; pointer-events:none; -webkit-user-drag:none; }
.crop-box { position:absolute; box-sizing:border-box; border:2px solid #fff; outline:1px solid rgba(15,23,42,.8); box-shadow:0 0 0 9999px rgba(15,23,42,.5); cursor:move; touch-action:none; }
.crop-box:focus-visible { outline:3px solid #93c5fd; }
.crop-handle { position:absolute; width:14px; height:14px; background:#fff; border:1px solid #0f172a; border-radius:2px; box-sizing:border-box; touch-action:none; }
@media (pointer:coarse) { .crop-handle { width:24px; height:24px; border-radius:50%; } }
.crop-handle-nw { left:0; top:0; transform:translate(-50%,-50%); cursor:nwse-resize; }
.crop-handle-n  { left:50%; top:0; transform:translate(-50%,-50%); cursor:ns-resize; }
.crop-handle-ne { left:100%; top:0; transform:translate(-50%,-50%); cursor:nesw-resize; }
.crop-handle-e  { left:100%; top:50%; transform:translate(-50%,-50%); cursor:ew-resize; }
.crop-handle-se { left:100%; top:100%; transform:translate(-50%,-50%); cursor:nwse-resize; }
.crop-handle-s  { left:50%; top:100%; transform:translate(-50%,-50%); cursor:ns-resize; }
.crop-handle-sw { left:0; top:100%; transform:translate(-50%,-50%); cursor:nesw-resize; }
.crop-handle-w  { left:0; top:50%; transform:translate(-50%,-50%); cursor:ew-resize; }
.crop-dims { margin:.4rem 0; font-size:.85rem; text-align:center; }
.crop-preview-wrap { display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; margin:.5rem 0; overflow-x:auto; }
.crop-preview { display:block; max-width:100%; height:auto; border:1px dashed var(--line); background:repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 0 0 / 12px 12px; }
.crop-warning { color:#92400e; }
.crop-warning[hidden], dialog.crop-dialog .logo-status[hidden] { display:none; }
dialog.crop-dialog .crop-actions { margin-top:.6rem; }
/* Shared crop dialog extras (image_crop_controller.js): shape presets, round crop box, thumbnail previews */
.crop-aspects { display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 .6rem; }
.crop-aspects[hidden], .crop-aspect[hidden], .crop-thumb[hidden], .crop-width-field[hidden] { display:none; }
.crop-aspect.selected { background:var(--brand); color:#fff; }
.crop-box.round { border-radius:50%; }
.crop-previews { display:flex; align-items:flex-end; gap:.8rem; flex-wrap:wrap; }
.crop-preview.round { border-radius:50%; }
.contact-photo-field .logo-preview { border-radius:50%; object-fit:cover; }

/* Admin > View as (mockup 04) */
.view-as-picker select { max-width: 13rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; padding: .25rem .4rem; }
.view-as-picker select option, .view-as-picker select optgroup { color: #1a1a2e; }
.view-as-banner { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between; background:#5b21b6; color:#fff;
  border-radius:10px; padding:.6rem .9rem; margin:0 0 1rem; box-shadow:0 2px 8px rgba(91,33,182,.25); }
.view-as-banner .vab-title { font-size:1.02rem; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.view-as-banner .vab-note, .view-as-banner .vab-sub { font-size:.84rem; opacity:.92; }
.view-as-banner .vab-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.view-as-banner select { max-width: 14rem; border-radius: 6px; border: 0; padding: .3rem .4rem; }
.view-as-banner .vab-exit { background:#fff; color:#5b21b6; border-color:#fff; font-weight:700; }
.access-log td.when { white-space:nowrap; }
.access-log .al-filters { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center; margin:.4rem 0 1rem; }
.access-log .al-filters select { width:auto; display:inline-block; margin-left:.3rem; }

main:has(.ntf-page) { max-width: 1100px; }
main:has(.ntf-screen) { max-width: 1200px; }
.mainnav .nav-dropdown > summary a.nav-group-link { display: inline; padding: 0; color: inherit; font-weight: inherit; }
.mainnav .nav-dropdown > summary a.nav-group-link:hover { text-decoration: underline; }
.ntf-page .legacy-fields { border: 1px solid var(--line); background: #fff; margin: 0 0 1rem; }
.ntf-page .legacy-row { display: grid; grid-template-columns: 14rem 1fr; gap: .4rem 1rem; padding: .45rem .7rem; border-bottom: 1px solid var(--line); }
.ntf-page .legacy-label { color: var(--muted); }
.ntf-page label { display: block; margin: .4rem 0; }
.ntf-page input[type=number], .ntf-page input[type=date], .ntf-page input[type=tel] { width: 100%; padding: .45rem; border: 1px solid var(--line); border-radius: 4px; }
.ntf-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0 1rem; }
.ntf-filters input, .ntf-filters select { width: auto; }
.ntf-buckets { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; }
.ntf-buckets li { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .6rem .9rem; }
.ntf-buckets a { text-decoration: none; }
.ntf-tabs a { margin-right: 1rem; }
.ntf-tabs a.active { font-weight: 700; border-bottom: 3px solid var(--accent); }
.suggestions { list-style: none; margin: .2rem 0 0; padding: 0; background: #fff; border: 1px solid var(--line); }
.suggestions li { padding: .3rem .5rem; cursor: pointer; }
dialog { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; max-width: 28rem; }
.btn.ghost, a.btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--line); }
.btn.secondary, a.btn.secondary { background: #fff; color: var(--brand); border: 1px solid var(--brand); }

.ntf-screen h1 { font-size: 1.35rem; margin: .2rem 0 .6rem; }
.route-section { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: .75rem .9rem; margin: 0 0 .8rem; }
.route-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; min-width: 0; }
.route-section > summary::-webkit-details-marker { display: none; }
.route-section > summary::marker { content: ""; }
.route-section-title { flex: none; font-weight: 700; font-size: 1.05rem; }
.route-section-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--muted); font-size: .92rem; }
.route-lock-slot { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; }
.route-lock { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--line); background: #fff; color: inherit; border-radius: 999px; padding: .12rem .55rem; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.route-lock.is-locked { border-color: #b45309; color: #9a3412; background: #fff7ed; }
.route-lock.is-static { cursor: default; }
.route-lock-by { color: var(--muted); font-size: .8rem; font-weight: 400; white-space: nowrap; }
.route-lock-form { display: none; }
.route-fields { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.route-fields:disabled { opacity: .72; }
.route-section-panel { margin-top: .85rem; }
.route-caret { flex: none; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.route-section[open] > summary .route-caret, .route-row.is-open .route-caret { transform: rotate(45deg); }
.route-section > summary:focus-visible, .route-row-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.route-summary { margin: 0 0 .8rem; padding-left: 1.1rem; }
.route-row { border: 1px solid var(--line); border-radius: 6px; padding: .7rem .8rem; margin: 0 0 .8rem; background: #fafbfc; }
.route-row-bar { display: flex; align-items: center; gap: .4rem; }
.route-row-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; background: none; border: 0; padding: 0; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.route-row-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-row-body { margin-top: .6rem; }
.route-row-body[hidden] { display: none; }
.pick-list { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: .45rem .55rem; margin: .2rem 0 .6rem; }
.pick-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .4rem; }
.pick-chips[hidden] { display: none; }
.pick-chip { display: inline-flex; align-items: center; gap: .25rem; background: #eef2f6; border-radius: 999px; padding: .12rem .5rem; font-size: .85rem; }
.pick-chip-x { border: 0; background: transparent; cursor: pointer; color: #6b7280; font-size: 1rem; line-height: 1; padding: 0 .1rem; }
.pick-options { max-height: 11rem; overflow: auto; display: grid; gap: .15rem; }
.ntf-page .pick-option { display: flex; gap: .45rem; align-items: flex-start; margin: 0; font-weight: 400; }
.pick-option input { margin-top: .2rem; }
.ntf-status-tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.ntf-status-tabs a { padding: .35rem .1rem .45rem; text-decoration: none; color: #374151; }
.ntf-status-tabs a.active { color: var(--brand); font-weight: 700; border-bottom: 3px solid var(--accent); }
.ntf-toolbar { background: #eceff1; border: 1px solid #e2e5e8; padding: .55rem .7rem; margin: 0 0 .7rem; }
.ntf-new { display: inline-block; background: #fff; border: 1px solid #cfd4da; border-radius: 3px; padding: .28rem .7rem; font-size: .78rem; letter-spacing: .04em; color: #374151; text-decoration: none; }
.ntf-search { display: flex; margin: 0 0 .6rem; }
.ntf-search input { border-radius: 4px 0 0 4px; }
.ntf-search-btn { background: #fff; border: 1px solid var(--line); border-left: 0; border-radius: 0 4px 4px 0; padding: 0 .7rem; cursor: pointer; }
.ntf-meta { display: flex; gap: 1.2rem; align-items: center; color: #374151; font-size: .92rem; margin: 0 0 .4rem; }
.ntf-per-page { display: flex; gap: .4rem; align-items: center; }
.ntf-per-page select { width: auto; }
.ntf-list { background: #fff; }
.ntf-list th { font-size: .78rem; color: #111; border-bottom: 2px solid #e5e7eb; }
.ntf-list td { vertical-align: middle; }
.ntf-list .num, .ntf-list td.nowrap { white-space: nowrap; }
.ntf-list tr.total td { font-weight: 700; border-top: 2px solid #111; }
.ntf-link, a.record-link { color: #c0392b; font-weight: 600; text-decoration: underline; }
.record-nav { display: flex; gap: 1rem; align-items: center; margin: .4rem 0 1rem; }
.record-nav-arrow.is-disabled, .btn.ghost.disabled { opacity: .45; pointer-events: none; }
.row-view { display: inline-flex; align-items: center; margin-right: .35rem; }
.row-view-icon::before { content: "👁"; }
.ntf-icon, .ntf-icon-btn { background: none; border: 0; padding: 0; line-height: 0; cursor: pointer; color: inherit; }
.ntf-controls { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.ntf-controls form.inline { display: block; }
.ntf-thumb { width: 54px; height: 40px; object-fit: cover; border-radius: 2px; }
.ntf-text-link, .ntf-text-btn { background: none; border: 0; padding: 0; color: #c0392b; font-weight: 700; letter-spacing: .04em; cursor: pointer; text-decoration: none; font-size: .8rem; }
.ntf-save, input.ntf-save { background: #8f1d2c; color: #fff; font-weight: 700; letter-spacing: .06em; border-radius: 2px; padding: .55rem 1.3rem; margin: .4rem 0; }
.ntf-vform { width: 100%; background: #fff; border: 1px solid #e5e7eb; margin: 0 0 .8rem; }
.ntf-vform th { width: 16rem; text-align: right; font-weight: 600; background: #fafafa; vertical-align: middle; }
.ntf-vform td { background: #fff; }
.lease-number { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; margin: .4rem 0 .8rem; }
.lease-number input { width: 8rem; }
.ntf-add { background: #fff; border: 1px solid #cfd4da; border-radius: 3px; padding: .25rem .6rem; cursor: pointer; }
.ntf-chosen { list-style: none; margin: 0 0 .4rem; padding: 0; }
.ntf-calc-panel { margin-top: .4rem; }
.ntf-pay-cards { display: flex; gap: 1rem; }
.ntf-pay-card { flex: 1; background: #d9d9d9; text-align: center; padding: 1.4rem 1rem; }
.ntf-pay-card strong { display: block; font-size: 1.6rem; }
.ntf-pay-card span { letter-spacing: .04em; font-size: .85rem; }
.ntf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: .6rem 0 1rem; }
.ntf-kpis.three { grid-template-columns: repeat(3, 1fr); }
.ntf-kpi { display: block; background: #fff; border: 1px solid #e5e7eb; text-align: center; padding: .9rem .5rem; text-decoration: none; color: inherit; }
.ntf-kpi .money { font-size: 1.25rem; font-weight: 700; }
.ntf-kpi .caption { color: #6b7280; font-size: .82rem; }
.ntf-collections { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.ntf-pie-wrap { display: flex; gap: 1rem; align-items: center; }
.ntf-pie { width: 220px; height: 220px; }
.ntf-legend { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.ntf-legend li { display: flex; gap: .4rem; align-items: center; margin: .2rem 0; }
.ntf-legend span { width: .8rem; height: .8rem; display: inline-block; }
.ntf-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.ntf-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4.5rem; color: #fff; text-decoration: none; text-align: center; padding: .4rem; }
.ntf-tile .count { font-size: 1.3rem; font-weight: 700; }
.ntf-tile .caption { font-size: .75rem; }
.ntf-filter { background: #8f1d2c; }
.ntf-proposal-bar { background: #eceff1; border: 1px solid #e2e5e8; padding: .7rem .9rem; margin-bottom: .8rem; }
.ntf-proposal-bar h2 { margin: 0 0 .5rem; font-size: 1rem; }
.ntf-proposal-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ntf-create { background: #fff; color: #374151; border: 1px solid #cfd4da; margin-top: .6rem; }
.ntf-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ntf-panel { background: #fff; border: 1px solid #e5e7eb; padding: .6rem .8rem 1rem; }
.ntf-panel h2 { margin: .2rem 0 .6rem; font-size: 1rem; letter-spacing: .04em; }
.ntf-plain { background: transparent; }
.ntf-plain th, .ntf-plain td { border: 0; padding: .28rem .2rem; vertical-align: middle; }
.ntf-plain th { width: 11rem; text-align: right; font-weight: 600; }
.ntf-result .strong th, .ntf-result .strong td { font-weight: 800; }
.ntf-apr th { width: 10rem; }
.ntf-apr td.with-suffix { display: flex; align-items: center; gap: .4rem; }
.ntf-apr input { width: 100%; }
.ntf-apr .btn { background: #fff; color: #374151; border: 1px solid #cfd4da; }
.ntf-apr-message { color: #8f1d2c; min-height: 1.2rem; }
.ntf-rich { margin-top: 1rem; }
.ntf-rich h2 { font-size: .95rem; letter-spacing: .04em; }
.ntf-merge-link { display: block; background: none; border: 0; padding: 0; color: #2563eb; cursor: pointer; font-size: .8rem; }
.ntf-dash-table td.num { text-align: right; }
.lease-hero { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .35rem 0 .15rem; }
.lease-hero .lease-vehicle { display: flex; gap: .6rem; align-items: center; font-weight: 700; }
.lease-lessee { font-size: 1.05rem; font-weight: 700; margin: .15rem 0 .7rem; }
.lease-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 .8rem; }
.lease-actions .btn { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .55rem; }
.lease-actions form.inline { display: inline; }
.lease-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .8fr); gap: 1.2rem; border: 1px solid var(--line); background: #fff; padding: .7rem .9rem; margin: 0 0 1rem; }
.lease-facts, .lease-figures { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .28rem .75rem; margin: 0; align-items: baseline; }
.lease-facts dt, .lease-figures dt { margin: 0; color: #4b5563; font-weight: 600; }
.lease-facts dd, .lease-figures dd { margin: 0; }
.lease-figures .hint { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; }
.payment-table-wrap { overflow-x: auto; }
#payments td { vertical-align: top; }
#payments tr.current-payment { background: #fff6d8; }
#payments .payment-edit { background: none; border: 0; padding: 0; color: #c0392b; font-weight: 700; cursor: pointer; }
#payments .inline-payment { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
#payments .inline-payment input[type="number"],
#payments .inline-payment input[type="date"],
#payments .inline-payment input[type="text"],
#payments .inline-payment textarea { width: 9.5rem; }
#payments .inline-payment summary { cursor: pointer; color: #c0392b; font-size: .82rem; }
@media (max-width: 800px) {
  .lease-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .ntf-kpis, .ntf-kpis.three, .ntf-collections, .ntf-calc, .ntf-proposal-picks, .ntf-tiles { grid-template-columns: 1fr; }
  .ntf-pay-cards { flex-direction: column; }
}
.ntf-proposal-screen { overflow-x: auto; }
.ntf-proposal-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0 1rem; }
.ntf-proposal-tools .btn, .ntf-proposal-tools button { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.ntf-proposal-tools form.inline { display: inline; }
.ntf-share { margin: .2rem 0 .6rem; font-size: .9rem; }
.ntf-share-label { letter-spacing: .04em; color: #6b7280; margin-right: .35rem; }
.ntf-share-url { color: #c0392b; font-weight: 600; word-break: break-all; }
#proposal-page-title { font-size: 1.15rem; margin: .2rem 0 .4rem; }
#proposal-details { margin: 0 0 1rem; background: #f4f5f7; border: 1px solid #e5e7eb; border-radius: 6px; padding: .55rem .7rem .7rem; }
#proposal-details summary { cursor: pointer; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; color: #374151; width: max-content; background: #fff; border: 1px solid #d1d5db; border-radius: 4px; padding: .35rem .7rem; list-style: none; }
#proposal-details summary::-webkit-details-marker { display: none; }
#proposal-details[open] .when-closed, #proposal-details:not([open]) .when-open { display: none; }
.proposal-detail-table { width: 100%; border-collapse: collapse; margin: .7rem 0 0; background: #fff; }
.proposal-detail-table th { width: 14rem; text-align: right; font-weight: 700; color: #111; padding: .55rem .9rem; border-bottom: 1px solid #eef0f2; vertical-align: top; }
.proposal-detail-table td { padding: .55rem .9rem; border-bottom: 1px solid #eef0f2; vertical-align: top; }
.proposal-detail-table .strong { font-weight: 800; }
.proposal-detail-gap td { height: .7rem; padding: 0; background: #f4f5f7; border: 0; }
.proposal-detail-terms { white-space: pre-wrap; overflow-wrap: anywhere; }
.proposal-preview-heading { font-size: 1rem; margin: .2rem 0 .4rem; }
@media print {
  .no-print { display: none !important; }
  .ntf-proposal-screen { background: #fff !important; padding: 0 !important; }
  .ntf-proposal-sheet { border: 0 !important; box-shadow: none !important; width: 100% !important; }
  @page { size: letter; margin: 0.45in; }
}
.tc-menu { position:relative; width:max-content; max-width:100%; margin:0; }
.tc-trigger { display:inline-flex; align-items:center; gap:.4rem; list-style:none; cursor:pointer; white-space:nowrap; color:#fff; font-size:.85rem; font-weight:600; line-height:1.2; padding:.28rem .45rem; border-radius:999px; }
.tc-trigger::-webkit-details-marker { display:none; }
.tc-trigger:hover, .tc-menu[open] > .tc-trigger { background:rgba(255,255,255,.12); }
.tc-trigger:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.tc-icon { display:block; flex:0 0 auto; }
.tc-pill { display:inline-flex; align-items:center; gap:.3rem; border-radius:999px; padding:.12rem .5rem; font-size:.72rem; font-weight:700; letter-spacing:.01em; }
.tc-pill-out { background:#e5e7eb; color:#1f2937; }
.tc-pill-in { background:#15803d; color:#fff; }
.tc-pill-break { background:#f59e0b; color:#1f2937; }
.tc-timer { font-variant-numeric:tabular-nums; }
.tc-panel { position:absolute; top:calc(100% + .4rem); right:0; z-index:80; width:20.5rem; max-width:calc(100vw - 1rem); box-sizing:border-box; padding:1.05rem 1.15rem 1rem; background:#fff; color:#1f2937; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.22); font-size:1rem; line-height:1.4; }
.tc-status { margin:0; font-size:1.45rem; font-weight:700; line-height:1.15; color:#111; }
.tc-since { margin:.2rem 0 0; color:#4b5563; font-size:1rem; }
.tc-today { margin:.7rem 0 .85rem; font-size:1.05rem; }
.tc-today strong { font-size:1.25rem; font-variant-numeric:tabular-nums; }
.tc-primary, .tc-secondary { display:block; width:100%; border-radius:8px; font-weight:700; cursor:pointer; font-family:inherit; }
.tc-primary { border:0; color:#fff; font-size:1.08rem; padding:.75rem .9rem; }
.tc-primary:focus-visible, .tc-secondary:focus-visible, .tc-help:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
.tc-go { background:#15803d; }
.tc-go:hover { background:#166534; }
.tc-stop { background:#b91c1c; }
.tc-stop:hover { background:#991b1b; }
.tc-secondary { margin-top:.45rem; background:#fff; color:#92400e; border:2px solid #d97706; font-size:.98rem; padding:.55rem .8rem; }
.tc-secondary:hover { background:#fffbeb; }
.tc-reminder { margin:.65rem 0 0; background:#fff3cd; color:#111; padding:.4rem .55rem; border-radius:6px; font-size:.9rem; }
.tc-links { display:flex; gap:1rem; margin:.85rem 0 0; }
.topbar .tc-panel a, .tc-help { color:var(--brand); font-size:.95rem; font-weight:700; text-decoration:underline; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; }
.tc-attest { color:#111; border:0; border-radius:10px; padding:1rem 1.1rem; max-width:22rem; }
.tc-attest p { margin:.35rem 0; }
.help-dialog { color:#111; border:0; border-radius:8px; padding:1rem 1.25rem; max-width:36rem; }
.help-dialog h2 { margin:0 0 .5rem; }
.help-dialog h3 { margin:1rem 0 .25rem; font-size:1rem; }
.help-dialog p { margin:.35rem 0; }
.help-dialog::backdrop, .tc-attest::backdrop { background:rgba(15, 23, 42, .45); }
.time-clock-enroll select { max-width:16rem; }
.tc-period-current { background:#ecfdf5; color:#14532d; border:1px solid #86efac; border-radius:8px; padding:.45rem .7rem; }
.period-nav { display:flex; flex-wrap:wrap; gap:.75rem; }
tr.period-total th, tr.period-total td { font-weight:700; border-top:2px solid #111; }
.day-totals .muted { display:block; font-weight:400; font-size:.78rem; }
.whos-in .tc-pill { border:1px solid transparent; }
.whos-in .tc-pill-out, .whos-in .tc-pill-absent { border-color:#d1d5db; }
.whos-in .tc-pill-absent { background:#fff; color:#4b5563; }
#board-date { width:auto; }
@media (max-width: 800px) {
  .tc-menu { flex-basis:100%; }
  .tc-panel { left:0; right:auto; width:min(20.5rem, calc(100vw - 1.25rem)); }
}