@import url('/css/tokens.css');

@layer reset, base, layout, components, utilities;

/* ============================================================
   SS Construction — Job Tracker · app.css
   Editorial light register (Deepwater Design system), coloured
   in SS Construction navy + gold. Hand-written for this tool.
   ============================================================ */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html, body { block-size: 100%; }
  html { color-scheme: light; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--type);
    font-family: var(--font);
    font-feature-settings: "tnum", "kern", "ss01";
    font-weight: 380;
    font-size: var(--fs-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--accent); color: #fff; }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 1px;
  }

  h1 { font-size: var(--fs-3xl); font-weight: 200; letter-spacing: -0.02em; line-height: 1.04; }
  h2 { font-size: var(--fs-xl); font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; }
  h3 { font-size: var(--fs-lg); font-weight: 540; letter-spacing: -0.005em; line-height: 1.3; }
  h4 {
    font-size: 0.78rem; font-weight: 540; letter-spacing: var(--track-up);
    text-transform: uppercase; color: var(--type-soft);
  }
  p { margin: 0; }
  a:hover { color: var(--accent); }
  strong { font-weight: 600; }
}

@layer layout {
  .skip-link {
    position: absolute; inset-block-start: -200px; inset-inline-start: 12px;
    padding: 10px 14px; background: var(--accent); color: #fff;
    font-size: 0.72rem; font-weight: 540; letter-spacing: var(--track-up-sm);
    text-transform: uppercase; z-index: 200; transition: inset-block-start 200ms ease;
  }
  .skip-link:focus { inset-block-start: 12px; }

  .container { max-inline-size: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
  .container--narrow { max-inline-size: 560px; }

  main { padding-block: var(--s-7) var(--s-8); }

  /* ---------- Header chrome ---------- */
  .chrome-bar { height: 3px; background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%); }

  .chrome {
    background: var(--panel);
    border-block-end: 1px solid var(--rule);
    padding: 16px var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap;
  }
  .chrome__brand { display: flex; align-items: baseline; gap: var(--s-3); text-decoration: none; }
  .chrome__mark {
    font-size: 0.9rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent);
  }
  .chrome__sub {
    font-size: 0.62rem; font-weight: 540; letter-spacing: var(--track-up);
    text-transform: uppercase; color: var(--type-soft);
    padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--rule);
  }
  .chrome__nav { display: flex; gap: clamp(16px, 2.5vw, 34px); align-items: center; }
  .chrome__nav a {
    font-size: 0.72rem; font-weight: 500; letter-spacing: var(--track-up-sm);
    text-transform: uppercase; color: var(--type-mute); padding-block: 4px;
    border-block-end: 2px solid transparent; transition: color 180ms ease, border-color 180ms ease;
  }
  .chrome__nav a:hover { color: var(--type); }
  .chrome__nav a.is-active { color: var(--accent); border-block-end-color: var(--gold); }
  .chrome__user {
    display: flex; align-items: center; gap: var(--s-4);
    font-size: 0.7rem; letter-spacing: var(--track-up-sm); text-transform: uppercase; color: var(--type-soft);
  }
  .chrome__user form { display: inline; }
  /* Account link + Sign out button share one style so they read as a pair. */
  .chrome__link {
    font-size: 0.7rem; letter-spacing: var(--track-up-sm); text-transform: uppercase;
    color: var(--type-soft); background: none; border: 0; padding: 0; cursor: pointer;
    transition: color 160ms ease;
  }
  .chrome__link:hover { color: var(--type); }
  .chrome__link.is-active { color: var(--accent); }

  /* ---------- Page head ---------- */
  .page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap; margin-block-end: var(--s-6);
  }
  .page-head__titles { display: flex; flex-direction: column; gap: var(--s-2); }
  .page-head h1 { margin: 0; }
  .page-head__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
}

@layer components {
  .label {
    font-size: var(--fs-xs); font-weight: 540; letter-spacing: var(--track-up);
    text-transform: uppercase; color: var(--type-soft); font-variant-numeric: tabular-nums;
  }
  .muted { color: var(--type-mute); }
  .lede { color: var(--type-mute); font-size: var(--fs-md); max-inline-size: 62ch; }

  .panel { background: var(--panel); border: 1px solid var(--rule); padding: var(--s-6); border-radius: var(--radius); }
  .panel--pad-sm { padding: var(--s-5); }

  /* ---------- Section blocks (job detail) ---------- */
  .section { margin-block-start: var(--s-6); }
  .section__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3); margin-block-end: var(--s-4);
    padding-block-end: var(--s-3); border-block-end: 1px solid var(--rule);
  }
  .section__head h2 { font-size: var(--fs-lg); font-weight: 540; letter-spacing: 0; }
  .section__head .label { position: relative; top: -1px; }

  /* ---------- KPI tiles ---------- */
  .kpi-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4);
  }
  .kpi-tile {
    background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2);
    position: relative; overflow: hidden;
  }
  .kpi-tile::before {
    content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--gold);
    opacity: 0; transition: opacity 180ms ease;
  }
  .kpi-tile--accent::before { opacity: 1; }
  .kpi-tile__label {
    font-size: var(--fs-xs); font-weight: 540; letter-spacing: var(--track-up-sm);
    text-transform: uppercase; color: var(--type-soft);
  }
  .kpi-tile__value {
    font-size: var(--fs-2xl); font-weight: 200; letter-spacing: -0.02em; line-height: 1.05;
    color: var(--type); font-variant-numeric: tabular-nums;
  }
  .kpi-tile__value .unit { font-size: var(--fs-md); font-weight: 400; color: var(--type-mute); }
  .kpi-tile__sub { font-size: var(--fs-sm); color: var(--type-mute); line-height: 1.4; }

  /* ---------- Buttons ---------- */
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: 10px 20px; font-size: 0.72rem; font-weight: 540; letter-spacing: var(--track-up-sm);
    text-transform: uppercase; border: 1px solid var(--type); background: transparent; color: var(--type);
    text-decoration: none; border-radius: var(--radius);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    font-variant-numeric: tabular-nums;
  }
  .button:hover { background: var(--type); color: var(--panel); text-decoration: none; }
  .button--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .button--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
  .button--gold { background: var(--gold); color: #1c1608; border-color: var(--gold); }
  .button--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
  .button--ghost { border-color: var(--rule); color: var(--type-mute); }
  .button--ghost:hover { border-color: var(--type); color: var(--type); background: transparent; }
  .button--danger { border-color: var(--signal); color: var(--signal); }
  .button--danger:hover { background: var(--signal); color: #fff; }
  .button--block { width: 100%; }
  .button--sm { padding: 6px 12px; font-size: 0.66rem; letter-spacing: 0.13em; }
  .button:disabled, .button[disabled] { opacity: 0.4; cursor: not-allowed; }

  /* Small icon-ish text button (delete a row etc.) */
  .link-btn {
    background: none; border: 0; color: var(--type-soft); cursor: pointer;
    font-size: 0.68rem; letter-spacing: var(--track-up-sm); text-transform: uppercase;
    transition: color 160ms ease;
  }
  .link-btn:hover { color: var(--signal); }

  /* ---------- Forms ---------- */
  .form-row { margin-block-end: var(--s-4); }
  label {
    display: block; font-size: var(--fs-xs); font-weight: 540; letter-spacing: var(--track-up-sm);
    text-transform: uppercase; color: var(--type-soft); margin-block-end: 6px;
  }
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=number], input[type=date], select, textarea {
    width: 100%; padding: 10px 13px; border: 1px solid var(--rule);
    background: var(--panel); color: var(--type); font: inherit; font-size: var(--fs-md);
    font-weight: 400; border-radius: var(--radius); transition: border-color 160ms ease;
  }
  input::placeholder, textarea::placeholder { color: var(--type-soft); }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
  select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--type-soft) 50%),
                      linear-gradient(135deg, var(--type-soft) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px;
  }
  textarea { font-family: var(--font); resize: vertical; min-height: 84px; }
  .field-hint { font-size: var(--fs-xs); color: var(--type-soft); margin-block-start: 4px; text-transform: none; letter-spacing: 0; }

  /* ---------- Alerts ---------- */
  .alert {
    padding: 12px 16px; border-inline-start: 2px solid currentColor; margin-block-end: var(--s-4);
    font-size: var(--fs-sm); background: var(--panel-2); border-radius: var(--radius);
  }
  .alert--error   { color: var(--status-red);   background: var(--status-red-bg); }
  .alert--info    { color: var(--accent);        background: var(--accent-soft); }
  .alert--success { color: var(--status-green);  background: var(--status-green-bg); }

  /* ---------- Status pills (job pipeline) ---------- */
  .status {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    border-radius: 999px; white-space: nowrap;
  }
  .status::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
  .status--live     { color: var(--gold-deep);    background: var(--gold-soft); }
  .status--complete { color: var(--status-green); background: var(--status-green-bg); }

  /* ---------- Badges (small counts / tags) ---------- */
  .badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    border-radius: 999px; font-variant-numeric: tabular-nums;
  }
  .badge--gold  { color: var(--gold-deep);   background: var(--gold-soft); }
  .badge--red   { color: var(--status-red);  background: var(--status-red-bg); }
  .badge--grey  { color: var(--type-mute);   background: var(--bg-2); }

  /* ---------- Progress bar ---------- */
  .bar { height: 5px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
  .bar__fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 240ms ease; }
  .bar__fill--done { background: var(--status-green); }

  /* ---------- Job list (editorial rows, not cards) ---------- */
  .job-list { border-block-start: 1px solid var(--rule); }
  .job-line {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s-4) var(--s-5);
    align-items: center; padding: var(--s-4) 0; border-block-end: 1px solid var(--rule-faint);
    text-decoration: none; color: inherit; transition: background 160ms ease;
  }
  .job-line:hover { background: var(--panel); text-decoration: none; }
  .job-line__main { min-width: 0; }
  .job-line__title { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
  .job-line__title h3 { font-size: var(--fs-lg); font-weight: 540; }
  .job-line__meta { font-size: var(--fs-sm); color: var(--type-mute); margin-block-start: 3px; }
  .job-line__right { display: flex; align-items: center; gap: var(--s-5); text-align: right; }
  .job-line__money { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
  .job-line__money .v { font-size: var(--fs-lg); font-weight: 540; font-variant-numeric: tabular-nums; }
  .job-line__money .k { font-size: var(--fs-xs); color: var(--type-soft); letter-spacing: var(--track-up-sm); text-transform: uppercase; }
  .job-line__prog { min-width: 120px; }
  .job-line__prog .label { display: block; margin-block-end: 5px; font-size: 0.6rem; }

  /* ---------- Data tables (ledgers) ---------- */
  table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  table.data th {
    text-align: left; padding: 10px 12px; font-size: 0.6rem; font-weight: 540; color: var(--type-soft);
    letter-spacing: 0.16em; text-transform: uppercase; background: var(--bg-2);
    border-block-end: 1px solid var(--rule); white-space: nowrap;
  }
  table.data td { padding: 11px 12px; border-block-end: 1px solid var(--rule-faint); vertical-align: top; }
  table.data tr:last-child td { border-block-end: 0; }
  table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.data tfoot td { border-block-start: 2px solid var(--rule); font-weight: 600; padding-top: 12px; }
  .table-wrap { overflow-x: auto; }

  /* ---------- Checklist (stages / snags) ---------- */
  .check-list { display: flex; flex-direction: column; }
  .check-item {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
    padding: 10px 0; border-block-end: 1px solid var(--rule-faint);
  }
  .check-item:last-child { border-block-end: 0; }
  .check-item input[type=checkbox] {
    width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; margin: 0;
  }
  .check-item__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .check-item__label .t { font-size: var(--fs-md); }
  .check-item.is-done .t { text-decoration: line-through; color: var(--type-soft); }
  .check-item__sub { font-size: var(--fs-xs); color: var(--type-soft); letter-spacing: var(--track-up-sm); text-transform: uppercase; }
  .check-item.is-overdue .check-item__sub { color: var(--signal); }
  .check-item__actions { display: flex; align-items: center; gap: var(--s-3); }

  /* ---------- Money split (job header) ---------- */
  .money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-4); }
  .money-cell { display: flex; flex-direction: column; gap: 3px; }
  .money-cell .k { font-size: var(--fs-xs); letter-spacing: var(--track-up-sm); text-transform: uppercase; color: var(--type-soft); }
  .money-cell .v { font-size: var(--fs-xl); font-weight: 300; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .money-cell .v.sm { font-size: var(--fs-lg); font-weight: 540; }
  .is-green { color: var(--status-green); }
  .is-red { color: var(--signal); }

  /* ---------- Definition rows (client / details) ---------- */
  .deflist { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4) var(--s-5); }
  .def { display: flex; flex-direction: column; gap: 3px; }
  .def dt { font-size: var(--fs-xs); letter-spacing: var(--track-up-sm); text-transform: uppercase; color: var(--type-soft); }
  .def dd { font-size: var(--fs-md); }
  .def dd a:hover { color: var(--accent); }

  /* ---------- Empty state ---------- */
  .empty {
    text-align: center; padding: var(--s-8) var(--s-5); border: 1px dashed var(--rule);
    border-radius: var(--radius); color: var(--type-mute);
  }
  .empty h3 { color: var(--type); font-weight: 400; margin-block-end: var(--s-2); }

  /* ---------- Login ---------- */
  .login-wrap { min-block-size: 100vh; display: grid; place-items: center; padding: var(--s-5); }
  .login-card { width: 100%; max-width: 400px; }
  .login-brand { text-align: center; margin-block-end: var(--s-6); }
  .login-brand__bar { width: 44px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); margin: 0 auto var(--s-4); }
  .login-brand h1 {
    font-size: 1rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent);
  }
  .login-brand p {
    color: var(--type-soft); font-size: var(--fs-xs); letter-spacing: var(--track-up-sm);
    text-transform: uppercase; margin-block-start: 8px;
  }
  .login-footer {
    margin-block-start: var(--s-5); font-size: 0.64rem; color: var(--type-soft); text-align: center;
    letter-spacing: var(--track-up-sm); text-transform: uppercase;
  }

  /* ---------- Sub-nav (job detail anchors) ---------- */
  .subnav { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-block: var(--s-4) 0; }
  .subnav a {
    font-size: 0.7rem; font-weight: 540; letter-spacing: var(--track-up-sm); text-transform: uppercase;
    color: var(--type-mute); padding-block-end: 4px; border-block-end: 2px solid transparent;
  }
  .subnav a:hover { color: var(--type); border-block-end-color: var(--rule); }
}

@layer utilities {
  .hidden { display: none !important; }
  .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;
  }
  .row { display: flex; gap: var(--s-3); align-items: center; }
  .row--end { justify-content: flex-end; }
  .row--between { justify-content: space-between; }
  .cluster { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
  .stack > * + * { margin-block-start: var(--s-4); }
  .stack-sm > * + * { margin-block-start: var(--s-2); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
  .mt-6 { margin-block-start: var(--s-6); }
  .num { font-variant-numeric: tabular-nums; }
  .nowrap { white-space: nowrap; }

  @media (max-width: 640px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .job-line { grid-template-columns: 1fr; }
    .job-line__right { justify-content: space-between; }
    .chrome { flex-direction: column; align-items: flex-start; }
    .page-head { align-items: flex-start; }
  }

  @media print {
    .chrome, .chrome-bar, .subnav, .page-head__actions, .link-btn, .button { display: none !important; }
    body { background: #fff; }
    .panel, .kpi-tile { border-color: #ccc; }
  }
}