/* HandoverReady: shared light and dark product surfaces. */
:root {
  color-scheme: light;
  --paper: #f3f6f8; --sheet: #ffffff; --ink: #182f3a; --muted: #566b76;
  --line: #dce4e8; --petrol: #0a6870; --petrol-deep: #084c56;
  --soft: #eaf0f3; --soft-hover: #e1e9ed; --accent-soft: #e4f3f1;
  --amber: #906013; --amber-fill: #fff2d6; --green: #176749; --green-fill: #e0f1e7;
  --red: #b23930; --shadow: 0 18px 55px -28px #173c5155, 0 2px 5px #173c5106;
  --inverse: #ffffff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101b24; --sheet: #192833; --ink: #e6eef2; --muted: #a3b6c2;
  --line: #32444f; --petrol: #83dbcd; --petrol-deep: #a8eadf;
  --soft: #20333f; --soft-hover: #2a414e; --accent-soft: #1c3b3e;
  --amber: #f4ce84; --amber-fill: #453a25; --green: #91d9b3; --green-fill: #223f35;
  --red: #ffb2a7; --shadow: 0 20px 65px -25px #0009, 0 2px 8px #0002;
  --inverse: #102c30;
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; line-height: 1.65; }
[hidden] { display: none !important; }
::selection { background: var(--petrol); color: var(--inverse); }
h1,h2,h3 { font-stretch: 100%; letter-spacing: -.035em; text-wrap: balance; }
p { text-wrap: pretty; }
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; }
a { text-underline-offset: .23em; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 4px; }
.btn {
  min-height: 46px; border-width: 1px; border-color: var(--line); border-radius: 9px;
  padding: .7rem 1.15rem; font-size: .91rem; font-weight: 650; line-height: 1.3;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.btn:hover { background: var(--soft-hover); border-color: var(--muted); }
.btn:active { transform: scale(.96); }
.btn-primary { border-color: var(--petrol); background: var(--petrol); color: var(--inverse); }
.btn-primary:hover { background: var(--petrol-deep); border-color: var(--petrol-deep); }
.btn-quiet { background: transparent; border-color: transparent; }
.btn-quiet:hover { background: var(--soft); border-color: transparent; }
.btn-small { min-height: 44px; font-size: .83rem; padding: .5rem .8rem; }
.wordmark { font-size: 1.16rem; font-weight: 750; font-stretch: 100%; letter-spacing: -.045em; gap: .55rem; }
.wordmark svg { width: 29px; height: 29px; }
.wordmark svg { color: var(--petrol); }
.wordmark .wordmark-ready { color: var(--petrol); }
.wordmark-text { display: flex; align-items: baseline; }
.field input,.field textarea,.field select {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  min-width: 0; width: 100%; padding: .75rem .85rem;
}
.field input:hover,.field textarea:hover,.field select:hover { border-color: var(--muted); }
.field label { font-weight: 600; }
input::placeholder,textarea::placeholder { color: var(--muted); opacity: .85; }
dialog { background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 100px #0005; max-height: calc(100dvh - 2rem); }
dialog::backdrop { background: #07151dd1; backdrop-filter: blur(5px); }
dialog .dialog-body { padding: clamp(1.25rem,4vw,2rem); gap: 1.1rem; }
dialog h2 { letter-spacing: -.035em; font-size: 1.6rem; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.icon-btn { width: 44px; height: 44px; min-width: 44px; border-radius: 8px; }
.icon-btn:hover { background: var(--soft); color: var(--ink); }
.appearance-field { border: 0; padding: 0; margin: .5rem 0 0; min-width: 0; }
.appearance-field legend { font-weight: 650; margin-bottom: .3rem; }
.theme-options { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; margin: 1rem 0 .25rem; }
.theme-options label { position: relative; cursor: pointer; }
.theme-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-options span { display: grid; place-items: center; min-height: 64px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .9rem; }
.theme-options input:checked + span { color: var(--petrol); border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); background: var(--accent-soft); font-weight: 650; }
.theme-options input:focus-visible + span { outline: 3px solid var(--petrol); outline-offset: 3px; }
.settings-trigger { display: inline-flex; align-items: center; gap: .45rem; }
.settings-trigger svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 100; padding: .8rem 1rem; background: var(--sheet); border: 1px solid var(--petrol); border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.error { color: var(--red); }
.privacy-line { color: var(--muted); font-size: .78rem; line-height: 1.6; }

/* Pack-builder polish, preserving the existing editing and export logic. */
.app-head { background: var(--sheet); border-bottom: 1px solid var(--line); min-height: 80px; padding-block: 1rem; }
.saved { font-size: .76rem; }
.app,.start { padding-top: 2.5rem; }
.start { padding-top: clamp(3rem,8vw,6rem); max-width: 65rem; }
.start h1 { font-size: clamp(2.1rem,4vw,3.25rem); font-weight: 700; font-stretch: 100%; max-width: 17ch; }
.start-lede { color: var(--muted); font-size: 1.05rem; max-width: 48rem; line-height: 1.8; }
.start-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 2.5rem; }
.start-option { border: 1px solid var(--line); border-radius: 13px; padding: 1.8rem 1.4rem 1.4rem; min-height: 230px; overflow: hidden; gap: .85rem; align-content: start; box-shadow: 0 1px 3px #1232; transition: border-color 150ms ease, background-color 150ms ease; }
.start-option::before { width: auto; height: 4px; right: 0; bottom: auto; border: 0; }
.start-option:hover { transform: none; border-color: var(--petrol); background: var(--accent-soft); box-shadow: var(--shadow); }
.start-option strong { font-stretch: 100%; font-size: 1.14rem; letter-spacing: -.02em; }
.start-option span { color: var(--muted); font-size: .91rem; }
.start-option em { align-self: end; font-size: .76rem; margin-top: .6rem; }
.start-small { line-height: 1.8; }
.job-title h1 { font-stretch: 100%; font-weight: 700; }
.job-title p { font-size: .9rem; }
.tally { padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); box-shadow: 0 1px 3px #1231; }
.tally-bar { border: 0; border-radius: 99px; height: 6px; background: var(--soft); }
.tally-cells { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 1.2rem; }
.cell { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .35rem; }
.cell dd { font-size: 1.75rem; font-weight: 650; font-stretch: 100%; font-variant-numeric: tabular-nums; }
.cell dt { font-size: .78rem; }
.starter-note { max-width: none; font-size: .76rem; line-height: 1.7; }
.workspace { gap: 1.25rem; grid-template-columns: 15rem minmax(0,1fr) 17rem; }
.dividers { margin: 0; gap: .4rem; }
.divider { margin: 0; padding: .8rem .75rem .8rem 1.1rem; background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: .84rem; min-height: 52px; }
.divider::before { top: .7rem; bottom: .7rem; width: 3px; border-radius: 2px; }
.divider:hover { background: var(--soft); }
.divider.is-active { margin: 0; border-color: var(--line); background: var(--sheet); box-shadow: 0 1px 3px #1231; }
.divider-add { border: 1px dashed var(--line); }
.divider-count.has-open { color: var(--amber); }
.sheet { border: 1px solid var(--line); border-top: 3px solid var(--tab,var(--petrol)); border-radius: 12px; padding: clamp(1rem,2vw,1.5rem); box-shadow: 0 1px 3px #1231; min-width: 0; }
.section-name { font-size: 1.25rem; font-stretch: 100%; }
.item { border-left-width: 3px; padding: 1rem .6rem 1.1rem 1rem; border-radius: 0 0 0 6px; }
.item-title { font-size: 1rem; line-height: 1.5; }
.item[data-state="outstanding"] .state { color: var(--amber); font-size: .72rem; }
.state,.check,.item-note { font-size: .8rem; }
.item-actions .btn { font-size: .78rem; min-height: 40px; padding: .45rem .7rem; }
.item-flags { gap: .5rem 1rem; }
.item.is-over { background: var(--accent-soft); }
body.dragging .item:not([data-state="na"]) { background: var(--accent-soft); }
.file { border-radius: 6px; background: var(--soft); }
.file-open { color: var(--petrol-deep); }
.file-meta { font-size: .7rem; }
.check { min-height: 44px; }
.check.is-off { color: var(--muted); }
.item-note { border-bottom-color: var(--line); }
.empty,.empty-line { color: var(--muted); }
.tray { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 1.15rem; }
.tray h2 { font-size: .95rem; font-stretch: 100%; }
.tray-empty { color: var(--muted); border: 1px dashed var(--muted); border-radius: 8px; font-size: .8rem; line-height: 1.8; padding: 1.2rem; }
.tray-small { font-size: .75rem; }
.tray-file { border-radius: 8px; border: 1px solid var(--line); }
.tray-file select { background: var(--paper); border-color: var(--line); border-radius: 6px; font-size: .8rem; }
.toast { border-radius: 10px; background: var(--petrol); color: var(--inverse); box-shadow: var(--shadow); }
.problems { color: var(--amber); border-radius: 8px; }
.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,6rem); padding-block: 4.5rem 6rem; align-items: start; }
.contact-layout h1 { font-size: clamp(2.5rem,5vw,4.3rem); line-height: 1.05; font-weight: 700; max-width: 12ch; }
.contact-intro { color: var(--muted); margin-top: 1.5rem; max-width: 35rem; }
.contact-form { display: grid; gap: 1.15rem; background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.3rem,4vw,2.3rem); box-shadow: var(--shadow); }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-status { font-size: .86rem; color: var(--muted); }
.contact-status[data-state="error"] { color: var(--red); }
.contact-status[data-state="success"] { color: var(--green); }
.contact-aside { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.5rem; color: var(--muted); font-size: .88rem; max-width: 30rem; }
.contact-aside h2 { color: var(--ink); font-size: 1.05rem; margin-bottom: .6rem; letter-spacing: -.02em; }
.legal-page { max-width: 48rem; padding-block: 4rem 6rem; }
.legal-page h1 { font-size: clamp(2rem,5vw,3.4rem); }
.legal-page h2 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: .8rem; }
.legal-page p { color: var(--muted); margin-top: 1rem; }
.legal-page ul { color: var(--muted); padding-left: 1.25rem; }
@media (max-width: 76rem) {
  .workspace { grid-template-columns: 14rem minmax(0,1fr); }
  .tray { grid-column: 1 / -1; position: static; margin-top: 0; max-height: none; }
}
@media (max-width: 52rem) {
  .start-options { grid-template-columns: 1fr; }
  .start-option { min-height: 0; }
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem 4rem; }
}
@media (max-width: 48rem) {
  .app-head { gap: .75rem; padding-inline: 1rem; }
  .app-head-actions { width: 100%; gap: .3rem; }
  .app-head-actions .saved { width: 100%; min-height: 1rem; }
  .app,.start { width: calc(100% - 2rem); }
  .workspace { grid-template-columns: minmax(0,1fr); }
  .dividers { margin: 0; padding-bottom: .4rem; }
  .divider { border-radius: 8px; padding: .8rem .7rem .8rem 1rem; max-width: 13rem; }
  .divider::before { top: .7rem; bottom: .7rem; right: auto; width: 3px; height: auto; }
  .divider.is-active { border-color: var(--line); }
  .sheet { border-radius: 12px; }
  .tally { padding: 1.1rem; }
  .tally-cells { grid-template-columns: repeat(2,1fr); }
  .file { gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}


.workspace-label{display:flex;align-items:center;gap:.65rem;color:var(--petrol);font-size:.8rem;font-weight:600;margin-bottom:1.3rem}
.workspace-label>span{width:7px;height:7px;background:var(--petrol);border-radius:50%}

/* Workspace tools keep the next decision close to the documents. */
.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}
.next-action{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:1.4rem;padding:1.3rem 1.5rem;border:1px solid var(--line);border-left:3px solid var(--petrol);border-radius:10px;background:var(--accent-soft)}
.next-action h2{font-size:1.04rem;letter-spacing:-.02em}.next-action p{font-size:.8rem;color:var(--muted);margin-top:.3rem}.next-action .btn{flex:none;background:var(--sheet)}
.workspace-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}.workspace-toolbar+.workspace{margin-top:1rem}
.view-options{display:flex;gap:.2rem;background:var(--soft);border-radius:10px;padding:3px}.view-options .btn{border-color:transparent;background:transparent}.view-options [aria-pressed="true"]{background:var(--sheet);border-color:var(--line);color:var(--petrol)}
.workspace-search{flex:1;min-width:12rem}.workspace-search input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--sheet);padding:.5rem .8rem;font-size:.83rem}
.sheet-head h2{font-size:1.3rem}.sheet-head .hint-line{margin-top:.4rem}.item-section-label{font-size:.75rem;color:var(--petrol);font-weight:600;margin:1.2rem 0 .5rem}
.tray-actions{display:flex;gap:.4rem;flex-wrap:wrap}.tray-actions .btn{font-size:.73rem;padding:.4rem .6rem}
#dlg-filing{width:min(44rem,calc(100vw - 2rem))}#filing-rows{display:grid;gap:.6rem;max-height:50dvh;overflow:auto;margin-block:1rem}
.filing-row{display:flex;align-items:flex-start;gap:.8rem;border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:1rem;cursor:pointer}.filing-row input{flex:none;margin-top:.3rem;width:18px;height:18px;accent-color:var(--petrol)}.filing-row>span{min-width:0;display:grid;gap:.3rem}.filing-row strong{font-size:.87rem;overflow-wrap:anywhere}.filing-row span span{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}.filing-row small{font-size:.7rem;color:var(--petrol)}
#pack-library:not(:empty){padding-bottom:3rem;margin-bottom:3rem;border-bottom:1px solid var(--line)}.library-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem}.library-heading h2{font-size:clamp(1.7rem,3vw,2.3rem)}.library-heading .workspace-label{margin-bottom:.7rem}.library-heading>.hint-line{max-width:28ch;font-size:.78rem}
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.7rem}.pack-card{display:flex;flex-direction:column;gap:.65rem;align-items:start;min-width:0;text-align:left;padding:1.5rem;border:1px solid var(--line);border-radius:12px;background:var(--sheet);cursor:pointer;transition:border-color 150ms ease}.pack-card:hover{border-color:var(--petrol)}.pack-card h3{font-size:1.15rem;overflow-wrap:anywhere;letter-spacing:-.02em}.pack-card p{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}.pack-card-ref{font-size:.7rem;color:var(--petrol);overflow-wrap:anywhere}.pack-card progress{width:100%;height:6px;margin-top:auto;accent-color:var(--petrol);border:0;border-radius:9px;overflow:hidden;background:var(--soft)}.pack-card progress::-webkit-progress-bar{background:var(--soft)}.pack-card progress::-webkit-progress-value{background:var(--petrol)}.pack-card-status{font-size:.72rem;color:var(--muted)}.pack-card-open{font-size:.8rem;font-weight:600;color:var(--petrol);margin-top:.6rem}
@media(max-width:52rem){.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-heading{align-items:start;flex-direction:column;gap:1rem}.next-action{align-items:start;flex-direction:column;gap:1rem}}
@media(max-width:35rem){.pack-grid{grid-template-columns:1fr}.workspace-search{min-width:100%;order:3}.view-options{flex:1}.workspace-toolbar>.btn{padding-inline:.6rem}.next-action{padding:1.1rem}.app-head-actions .btn{font-size:.75rem;padding-inline:.6rem}}