/* coast_int styles: one file for every page.
   Shared rules first, then one section per page. Page sections only use classes that appear on
   that page; where two pages used the same class name, the selector is narrowed (noted below).
   Served with a version stamp (?v=...), so phones cache it but pick up changes right away. */

:root {
  --brand: #1d3557;
  --bg: #f4f5f7;
  --card: #fff;
  --line: #e3e3e3;
  --text: #222;
  --muted: #666;
  --ok: #d1f0db;
  --error: #fde2e1;
}
* { box-sizing: border-box; }
/* Make the hidden attribute always win, even over rules like "label { display: grid }". */
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.4; background: var(--bg); color: var(--text); }
a { color: var(--brand); }

/* Header stays on screen while scrolling; safe-area padding keeps it clear of the iPhone notch. */
header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px;
         background: var(--brand); color: #fff; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
header a { color: #fff; font-weight: bold; font-size: 1.1rem; text-decoration: none; }
header form { display: flex; align-items: center; gap: 8px; margin: 0; }
header button { min-height: 36px; padding: 4px 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); }
header a.me { font-size: 1rem; font-weight: normal; text-decoration: underline; text-underline-offset: 3px; }

/* The main tabs (Home, Projects, Timecard, Team), just under the header. aria-current marks the page you're on. */
nav.tabs { display: flex; background: var(--brand); padding: 0 16px; position: sticky; top: 56px; z-index: 9; }
nav.tabs a { flex: 1; max-width: 200px; text-align: center; padding: 10px 8px; color: rgba(255, 255, 255, 0.75);
             text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; }
nav.tabs a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }

/* Phone menu: on narrow screens the tabs fold into a "☰" button in the header. Built on <details>
   (no JavaScript), so it can't fail to load and needs nothing from the security policy.
   It opens a full-width list under the header; picking a tab loads a new page, which starts closed. */
header .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
details.menu { display: none; }
details.menu > summary { background: transparent; padding: 6px 10px; min-height: 40px; display: flex; align-items: center; gap: 6px;
                         border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 8px; font-size: 1rem; white-space: nowrap; }
details.menu[open] > summary { border-radius: 8px; background: rgba(255, 255, 255, 0.15); }
details.menu > summary:focus-visible { outline: 3px solid #7aa7e0; }
.menu-list { position: absolute; left: 0; right: 0; top: 100%; background: var(--brand); padding: 4px 0 10px;
             border-top: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); }
.menu-list a, .menu-list button { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 20px;
             color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; font-weight: 600; text-decoration: none;
             background: transparent; border: 0; border-radius: 0; border-left: 4px solid transparent; text-align: left; }
.menu-list a[aria-current="page"] { color: #fff; border-left-color: #fff; background: rgba(255, 255, 255, 0.1); }
.menu-list .account { border-top: 1px solid rgba(255, 255, 255, 0.25); margin-top: 6px; padding-top: 6px; }
.menu-list form { display: block; }
.menu-list .account a { font-weight: normal; }
@media (max-width: 640px) {
  nav.tabs { display: none; }
  details.menu { display: block; }
  header form.account-bar { display: none; }   /* name + Log out move into the menu on phones */
}

main { max-width: 900px; margin: 0 auto; padding: 12px 16px 40px; }
section { background: var(--card); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
.muted { color: var(--muted); font-weight: normal; }
.num { text-align: right; }

/* Forms. 16px text stops iPhones zooming in when a box is tapped; 44px is a comfortable thumb target. */
form.stack { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-weight: 600; font-size: 0.95rem; }
input, textarea, button, select { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 10px; border-radius: 8px; }
input, textarea, select { width: 100%; border: 1px solid #bbb; background: #fff; color: var(--text); }
button { background: var(--brand); color: #fff; border: 0; font-weight: 600; cursor: pointer; }
button.secondary { background: var(--bg); color: var(--text); border: 1px solid #bbb; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.field-label { font-weight: 600; font-size: 0.95rem; }

/* Catalog pickers (materials, assets) */
.catalog-picker { display: grid; gap: 8px; }
.catalog-picker .results { display: grid; gap: 4px; }
.catalog-picker .results button { text-align: left; font-weight: normal; background: var(--bg); color: var(--text); border: 1px solid #ddd; }
.catalog-picker .results button small { color: var(--muted); }
.catalog-picker .results button.add-new { border-style: dashed; font-weight: 600; }
.catalog-picker .chosen { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                          padding: 8px 10px; border: 2px solid var(--brand); border-radius: 8px; }
.catalog-picker .chosen button { min-height: 36px; padding: 4px 12px; }
.new-entry { display: grid; gap: 10px; border: 1px dashed #999; border-radius: 8px; padding: 10px; margin: 0; min-width: 0; }
.new-entry legend { font-weight: 600; padding: 0 4px; }

/* References checklist inside the billable form */
details.refs > summary { background: var(--bg); color: var(--text); border: 1px solid #bbb; text-align: left; padding: 10px; }
.refs-body { display: grid; gap: 8px; padding: 10px; border: 1px solid #bbb; border-top: 0; border-radius: 0 0 8px 8px; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: normal; }
label.check input { width: 22px; height: 22px; min-height: 0; flex: none; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button.danger { background: #b42318; width: 100%; }
.back { display: inline-block; margin-bottom: 10px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--bg); font-size: 0.8rem; font-weight: 600; }
/* Type pickers: radio buttons styled as big tappable tiles. */
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0; }
.picker legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.picker label { display: block; position: relative; }  /* keeps the hidden radio inside its tile, not off the page edge */
.picker input { position: absolute; opacity: 0; }
.picker span { display: block; text-align: center; padding: 10px 4px; border: 1px solid #bbb; border-radius: 8px; font-weight: 600; }
.picker input:checked + span { background: var(--brand); color: #fff; border-color: var(--brand); }
.picker input:focus-visible + span { outline: 3px solid #7aa7e0; }
.chips { display: flex; gap: 6px; }
.chips button { flex: 1; background: var(--bg); color: var(--text); border: 1px solid #bbb; }

/* Expandable "+ Add ..." panels: the summary line looks like a big button. */
details > summary { list-style: none; cursor: pointer; text-align: center; font-weight: 600;
                    background: var(--brand); color: #fff; padding: 12px; border-radius: 8px; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { border-radius: 8px 8px 0 0; }
details > form { border: 2px solid var(--brand); border-top: 0; border-radius: 0 0 8px 8px; padding: 12px; background: var(--card); }
details + details { margin-top: 8px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; background: var(--error); }
.flash.ok { background: var(--ok); }
.flash.info { background: #e6eef8; }  /* a friendly heads-up, not an error */

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* On phones each table row becomes a mini card; data-label on each cell supplies its column name. */
@media (max-width: 640px) {
  table, tbody, tr, td { display: block; }
  thead { display: none; }
  tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  td { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border: 0; text-align: right; }
  td::before { content: attr(data-label); color: var(--muted); text-align: left; flex: none; }
  td.empty { display: none; }  /* skip blank cells like "Date worked: -" on phones */
}

/* ---------- Home tab (home.html) ---------- */
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.glance a { padding: 10px; border-radius: 8px; background: var(--bg); color: inherit; text-decoration: none; text-align: center; }
.glance strong { display: block; font-size: 1.5rem; }
.recent { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.recent li:last-child { border-bottom: 0; }
.recent .what { min-width: 0; overflow-wrap: anywhere; }
.recent .amount { white-space: nowrap; font-weight: 600; text-align: right; }

/* ---------- Projects list (projects.html) ---------- */
.search { margin: 12px 0; }
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { display: grid; gap: 4px; padding: 14px; border-radius: 10px; background: var(--card); color: inherit; text-decoration: none; }
.card strong { font-size: 1.05rem; }
.card.closed { opacity: 0.7; }
.closed-heading { grid-column: 1 / -1; margin: 12px 0 0; }
.figures { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-weight: 600; font-size: 0.9rem; margin-top: 4px; }

/* ---------- Project page (project.html) ---------- */
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; margin-top: 12px; }
.totals a { padding: 8px 2px; border-radius: 8px; background: var(--bg); color: inherit; text-align: center; text-decoration: none; font-size: 0.75rem; }
.totals strong { display: block; font-size: 1rem; }
.actions { margin-bottom: 12px; }
.export { margin-top: 12px; }
.export button, .close-project { width: 100%; }
.filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filter button { min-height: 36px; padding: 4px 12px; background: var(--bg); color: var(--text); border: 1px solid #bbb; font-weight: normal; }
.filter button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.supplement { padding: 10px 0; border-bottom: 1px solid var(--line); }
.supplement:last-child { border-bottom: 0; }
.supplement img { display: block; max-width: 100%; max-height: 260px; margin-top: 6px; border-radius: 8px; }
.supplement .body { margin-top: 4px; white-space: pre-wrap; }
.supplement a { overflow-wrap: anywhere; }
/* Narrowed to the lists: other pages use .edit without the bold. */
.list-body .edit { font-weight: 600; white-space: nowrap; }
.ref { font-weight: 600; overflow-wrap: anywhere; }
/* Billables and Supplements: panels that open and close; the header shows the count. */
details.list { background: var(--card); border-radius: 10px; margin-bottom: 12px; }
details.list > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                         background: none; color: var(--text); text-align: left; padding: 14px; border-radius: 10px; }
details.list > summary h2 { margin: 0; }
details.list > summary::after { content: "\25B8"; font-size: 1.2rem; color: var(--muted); transition: transform 0.15s; }
details.list[open] > summary::after { transform: rotate(90deg); }
.list-body { padding: 0 14px 14px; }
/* Jump links land below the sticky header instead of under it. */
details[id] { scroll-margin-top: 110px; }

/* ---------- Team tab (team.html) ---------- */
/* div.person, not .person: the Timecard's fold-out panels are details.person. */
div.person { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
div.person:last-child { border-bottom: 0; }
div.person .who { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
div.person .contact { overflow-wrap: anywhere; }
.inline { display: flex; gap: 8px; margin: 0; }
.inline input, .inline select { flex: 1; min-width: 0; }
.inline button { flex: none; }
details.manage > summary { background: none; color: var(--brand); text-align: left; padding: 4px 0; font-size: 0.95rem; }
details.manage[open] > summary { border-radius: 0; }
.manage-body { display: grid; gap: 8px; padding: 8px 0 0; }
.newlink { border: 2px solid var(--brand); }
.newlink input { font-family: ui-monospace, monospace; font-size: 14px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag.wait { background: #fff1c2; }

/* ---------- Timecard (both views) (_timecard.html) ---------- */
.range { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(90px, 100%), 1fr)); gap: 6px; }
.presets a { display: block; text-align: center; padding: 10px 4px; border: 1px solid #bbb; border-radius: 8px;
             color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.presets a[aria-current="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
/* min-width: 0 lets grid items shrink to the screen; date inputs otherwise refuse to. */
/* Narrowed to the date range so other forms keep their layout. */
.range .row > *, .range .row input { min-width: 0; }
.big { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.download { display: block; margin-top: 12px; text-align: center; padding: 12px; border-radius: 8px;
            background: var(--brand); color: #fff; font-weight: 600; text-decoration: none; }
.sums { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sums table td:last-child { text-align: right; white-space: nowrap; }
.tech-picker { margin-top: 10px; }
.money { margin-top: 6px; font-size: 1.05rem; }
@media (max-width: 640px) {
  .sums tr { display: flex; justify-content: space-between; gap: 12px; }
  .sums table td::before { content: none; }
  .sums table td { text-align: left; }
}

/* ---------- Timecard: all employees (fold-out person panels) (hours_team.html) ---------- */
details.person { background: var(--card); border-radius: 10px; margin-bottom: 12px; }
details.person > summary { display: flex; justify-content: space-between; gap: 12px; background: none;
                           color: var(--text); text-align: left; padding: 14px; border-radius: 10px; }
details.person > summary::after { content: "\25B8"; color: var(--muted); }
details.person[open] > summary::after { content: "\25BE"; }
details.person > .inner { padding: 0 6px 6px; }
details.person > .inner section { background: var(--bg); }

/* ---------- Password boxes (_macros.html password_field) ---------- */
/* The Show/Hide button sits inside the right edge of the box; the box gets room so typed
   text doesn't run under it. Edge's own eye icon is turned off so there's only one button. */
.password-field { display: grid; gap: 4px; }
.password-field > label { display: block; }
.reveal { position: relative; }
.reveal input { padding-right: 76px; }
.reveal input::-ms-reveal { display: none; }
.reveal-toggle { position: absolute; top: 0; right: 0; height: 100%; padding: 0 14px; background: transparent;
                 color: var(--brand); border: 0; border-left: 1px solid #ddd; border-radius: 0 8px 8px 0; }
.reveal-toggle:focus-visible { outline: 3px solid #7aa7e0; outline-offset: -3px; }
/* Read by screen readers, not shown: "Show password" instead of just "Show". */
.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; }