/* Foundation styles. Brand colors are CSS variables so the brand can change
   without touching components (spec 95, 100). Full design system: Phase 2+. */
:root {
  --navy: #14243B; --ocean: #1F4E6B; --sea: #5E8C7A; --ivory: #F7F2E8;
  --limestone: #E6DCC8; --brass: #A8843F; --mahogany: #4A2A20;
  --ink: #1B1F24; --muted: #5B6470; --danger: #8E2C2C;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 16px/1.5 var(--sans); }
a { color: var(--ocean); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.top { background: var(--navy); color: var(--ivory); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--brass); }
.brand { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .04em; }
.wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
h1, h2 { font-family: var(--serif); font-weight: 600; color: var(--navy); }
.card { background: #fff; border: 1px solid var(--limestone); border-radius: 6px; padding: 20px 24px; margin: 0 0 20px; }
.notice { border-left: 4px solid var(--sea); padding: 10px 14px; background: #fff; color: var(--muted); }
button, .btn { font: inherit; background: var(--navy); color: var(--ivory); border: 0; border-radius: 4px; padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary { background: transparent; color: var(--ivory); border: 1px solid var(--brass); }
input { font: inherit; padding: 10px 12px; border: 1px solid var(--limestone); border-radius: 4px; width: 100%; max-width: 320px; }
label { display: block; font-weight: 600; margin: 12px 0 6px; }
code.key { font-size: 1.05rem; letter-spacing: .08em; background: var(--ivory); padding: 6px 10px; border-radius: 4px; word-break: break-all; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--limestone); }
.error { color: var(--danger); }
.hidden { display: none; }
.nav { display: flex; gap: 18px; }
.nav a { color: var(--limestone); text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--brass); }
select { font: inherit; padding: 10px 12px; border: 1px solid var(--limestone); border-radius: 4px; max-width: 320px; width: 100%; background: #fff; }
button.plain { background: transparent; color: var(--ocean); border: 1px solid var(--limestone); }
button.danger { background: var(--danger); }
td .actions { display: flex; flex-wrap: wrap; gap: 6px; }
td button { padding: 6px 10px; font-size: .9rem; }
pre.codes { font-size: 1.05rem; line-height: 1.9; background: var(--ivory); padding: 14px 18px; border-radius: 4px; columns: 2; }
dialog { border: 1px solid var(--limestone); border-radius: 6px; padding: 20px 24px; max-width: 420px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(20, 36, 59, .45); }
@media (max-width: 640px) { .top { flex-wrap: wrap; gap: 10px; } .nav { order: 3; width: 100%; } th:nth-child(4), td:nth-child(4) { display: none; } }

.muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid .card { margin: 0; }
.grid .span2 { grid-column: span 2; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } .grid .span2 { grid-column: auto; } }
ul.plainlist { list-style: none; padding: 0; margin: 0 0 8px; }
ul.plainlist li { padding: 8px 0; border-bottom: 1px solid var(--limestone); }
ul.timeline li small { display: block; color: var(--muted); }
.badge { display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 10px; background: var(--limestone); color: var(--navy); margin-left: 6px; }
.badge.foreign { background: var(--brass); color: #fff; }
details.addform { margin-top: 10px; }
details.addform summary { cursor: pointer; color: var(--ocean); font-weight: 600; padding: 6px 0; }
details.addform .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
details.addform .row label { margin: 8px 0 4px; }
td a, li a { color: var(--ocean); }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filters > div { min-width: 150px; }
.filters .check { display: flex; gap: 6px; align-items: center; min-width: 0; padding-bottom: 10px; }
.filters .check input { width: auto; }
.filters .check label { margin: 0; font-weight: 500; }
input.short { max-width: 90px; }
fieldset { border: 1px solid var(--limestone); border-radius: 4px; margin: 14px 0; padding: 8px 14px; }
legend { font-weight: 600; padding: 0 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.checks label { display: flex; gap: 6px; align-items: center; margin: 4px 0; font-weight: 400; }
.checks input { width: auto; }
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pipeline button { background: var(--ivory); color: var(--ink); border: 1px solid var(--limestone); text-align: left; padding: 8px 10px; }
.pipeline button[aria-pressed="true"] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.pipeline strong { display: block; font-size: 1.4rem; font-family: var(--serif); color: var(--navy); }
.pipeline small { color: var(--muted); display: block; font-size: .8rem; }
.views button { margin: 0 6px 6px 0; }
.badge.tag-navy { background: var(--navy); color: var(--ivory); } .badge.tag-ocean { background: var(--ocean); color: #fff; }
.badge.tag-sea { background: var(--sea); color: #fff; } .badge.tag-brass { background: var(--brass); color: #fff; }
.badge.tag-mahogany { background: var(--mahogany); color: var(--ivory); } .badge.tag-stone { background: var(--limestone); color: var(--navy); }
#search-results li a { display: block; }

.topright { display: flex; gap: 14px; align-items: center; }
.bell { color: var(--limestone); text-decoration: none; }
.bell .badge { background: var(--brass); color: #fff; }
.lead { font-size: 1.1rem; }
.state { font-size: .8rem; padding: 2px 8px; border-radius: 10px; }
.state.available, .state.accepted, .state.completed, .state.received { background: #dfeee6; color: #1d5b3c; }
.state.scanning, .state.processing, .state.requested, .state.viewed, .state.expected { background: #f3ead6; color: #6b4e14; }
.state.uploaded, .state.under_review { background: #dde8f1; color: var(--ocean); }
.state.rejected, .state.needs_replacement { background: #f4dede; color: var(--danger); }
.state.waived, .state.cancelled, .state.archived { background: var(--limestone); color: var(--muted); }
li.unread { font-weight: 600; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tabs button { background: transparent; color: var(--ocean); border: 1px solid var(--limestone); padding: 6px 12px; }
.tabs button[aria-selected="true"] { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
ol.stepper { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 12px 0; counter-reset: s; }
ol.stepper li { counter-increment: s; padding: 6px 10px 6px 8px; border: 1px solid var(--limestone); border-radius: 16px; font-size: .88rem; color: var(--muted); background: #fff; }
ol.stepper li::before { content: counter(s) " "; font-weight: 600; }
ol.stepper li.done { background: #dfeee6; color: #1d5b3c; border-color: #b8d8c6; }
ol.stepper li.current { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.actions-row button { margin: 0 8px 8px 0; }
textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--limestone); border-radius: 4px; }
.task { border-bottom: 1px solid var(--limestone); padding: 10px 0; }
.task .head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.task .head input { width: auto; }
.task ul { list-style: none; margin: 6px 0 0 28px; padding: 0; }
.task li label { display: flex; gap: 6px; align-items: center; font-weight: 400; margin: 2px 0; }
.task li input { width: auto; }
.overdue { color: var(--danger); font-weight: 600; }

.board { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; }
.board .col { background: #fff; border: 1px solid var(--limestone); border-radius: 6px; padding: 10px; min-height: 120px; }
.board .col h3 { margin: 0 0 8px; font-size: 1rem; }
.board .card2 { border: 1px solid var(--limestone); border-left: 4px solid var(--sea); border-radius: 4px; padding: 8px; margin-bottom: 8px; background: var(--ivory); }
.board .card2.urgent { border-left-color: var(--danger); } .board .card2.high { border-left-color: var(--brass); }
.board .card2 small { display: block; color: var(--muted); }
.board select { margin-top: 6px; font-size: .85rem; padding: 4px 6px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dow { font-weight: 600; text-align: center; font-size: .85rem; color: var(--muted); }
.cal .day { background: #fff; border: 1px solid var(--limestone); border-radius: 4px; min-height: 90px; padding: 4px; font-size: .8rem; }
.cal .day.other { opacity: .45; } .cal .day.today { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.cal .day .n { font-weight: 600; }
.cal .day a { display: block; margin-top: 3px; padding: 2px 4px; border-radius: 3px; background: var(--ivory); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal .day a.deadline { background: #f3ead6; } .cal .day a.task { background: #dde8f1; } .cal .day a.request { background: #dfeee6; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } .cal { grid-template-columns: 1fr; } .cal .dow, .cal .day.other { display: none; } .cal .day { min-height: 0; } }
.tplrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; border-bottom: 1px dashed var(--limestone); padding: 6px 0; }
.tplrow input, .tplrow select { max-width: 200px; }
.tplrow label { margin: 2px 0; font-size: .85rem; }

.formcode { font-weight: 600; white-space: nowrap; }

.flag { border-left: 4px solid var(--brass); padding-left: 10px; }
.needsconf { color: var(--brass); font-weight: 600; }
.ddrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--limestone); padding: 6px 0; }
.ddrow span { flex: 1 1 260px; }
.ddrow select { width: auto; }

.recbox { border: 1px solid var(--limestone); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.recgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.recgrid label { font-size: .85rem; margin: 0; }
.diff0 { color: #1d5b3c; font-weight: 600; } .diffx { color: var(--danger); font-weight: 600; }
.jelines { width: 100%; font-size: .9rem; } .jelines td { padding: 3px 6px; } .jelines td.num { text-align: right; font-variant-numeric: tabular-nums; }
.jeform .row { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 6px; margin-bottom: 6px; }
@media (max-width: 760px) { .jeform .row { grid-template-columns: 1fr 1fr; } }

.tablewrap { overflow-x: auto; }
#s-compare th, #s-compare td { padding: 6px 10px; border-bottom: 1px solid var(--limestone); text-align: left; }
#s-compare td.num { text-align: right; font-variant-numeric: tabular-nums; }
#s-compare tr.rec td.best { font-weight: 600; }
.scnrow { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 760px) { .scnrow { grid-template-columns: 1fr 1fr; } }
.memobody { white-space: pre-wrap; }

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.board .col h2 { margin: 0 0 8px; font-size: 1rem; }

.suggest { margin-top: 4px; padding: 4px 8px; border-left: 3px solid var(--sea); background: #eef3f7; font-size: .85rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--limestone); border-radius: 6px; padding: 10px 12px; background: #fff; }
.tile .v { font-size: 1.5rem; font-weight: 600; display: block; font-variant-numeric: tabular-nums; }
.tile .l { font-size: .85rem; color: var(--muted); display: block; }
.tile small { display: block; }
.tile.warn .v { color: var(--danger); }
.tile a { text-decoration: none; color: inherit; display: block; }

.rich h3 { font-size: 1.05rem; margin: .9em 0 .3em; } .rich h4 { font-size: .98rem; margin: .8em 0 .2em; }
.rich p { margin: 0 0 .7em; } .rich ul, .rich ol { margin: 0 0 .7em 1.3em; padding: 0; }
.memobody.rich { white-space: normal; }

.checklist li { padding: 6px 0; border-bottom: 1px solid var(--limestone); } .checklist li.done { color: var(--muted); } .checklist small { display: block; }
#help-list details, #phelp details { border-bottom: 1px solid var(--limestone); padding: 8px 0; } #help-list summary, #phelp summary { cursor: pointer; font-weight: 600; }

/* Phase 17: layout fixes. Checkboxes and radios keep their natural size
   (the general input rule above makes text boxes full width). */
input[type="checkbox"], input[type="radio"] { width: auto; max-width: none; padding: 0; margin: 0 6px 0 0; vertical-align: middle; }
/* The main menu has many items: on wide screens it wraps onto a second line
   under the firm name instead of running off the edge; on narrower screens it
   becomes one row that scrolls sideways. */
.top { flex-wrap: wrap; row-gap: 8px; }
.nav { flex-wrap: wrap; row-gap: 6px; column-gap: 16px; min-width: 0; }
@media (max-width: 1100px) {
  .nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
  .nav a { white-space: nowrap; flex: 0 0 auto; }
}

/* Firm mark in the app headers (staff and portal). */
.brand-wrap { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { height: 30px; width: auto; display: block; }
@media print { .brand-mark { display: none; } }