/* ---------------------------------------------------------------------------
   DesignCamp -- application stylesheet

   One file, no framework, no build step. The deployment target is ordinary
   cPanel hosting and prompt section 2 forbids a Node build in production, so a
   stylesheet somebody can read and edit in place is worth more here than a
   toolchain.

   MOBILE FIRST. PRD section 61 requires the client review screen to work on a
   phone, and section 63 asks for "obvious status badges" and "large review
   buttons". Base rules are the small-screen case; media queries add columns.

   NOTE FOR ANYONE TESTING THIS: `chrome --headless --window-size=375,H` does NOT
   narrow the layout viewport -- it lays the page out wide and CROPS the image to
   375px. Every mobile screenshot taken that way looks broken in exactly the way
   a real overflow bug looks. Measure element rects inside a same-origin iframe
   instead. That artefact caused three false alarms on another project on this
   box.
   --------------------------------------------------------------------------- */

:root {
    /* A quiet neutral palette: the artwork under review is the thing that
       should carry colour, not the interface around it. */
    --paper:      #ffffff;
    --shade:      #f4f5f7;
    --shade-deep: #e9ebef;
    --line:       #d8dbe0;
    --ink:        #1c1f24;
    --ink-soft:   #4a5057;
    --ink-faint:  #767d86;

    --accent:      #2f5fd8;
    --accent-deep: #234ab0;
    --accent-wash: #eaf0fe;

    /* Status tones. Each maps to one Status::tone() value, so a badge colour is
       decided in PHP and named here -- never chosen in a template. */
    --tone-ok:    #1f7a4d;
    --tone-ok-bg: #e6f4ec;
    --tone-final:    #14532d;
    --tone-final-bg: #d7ecdd;
    --tone-warn:    #92500e;
    --tone-warn-bg: #fdf0dd;
    --tone-busy:    #1d4f8c;
    --tone-busy-bg: #e5eefa;
    --tone-info:    #4c3a94;
    --tone-info-bg: #eee9fb;
    --tone-idle:    #4a5057;
    --tone-idle-bg: #eceef1;
    --tone-mute:    #767d86;
    --tone-mute-bg: #f0f1f3;
    --tone-bad:    #a52121;
    --tone-bad-bg: #fbe9e9;

    --radius:    6px;
    --radius-lg: 10px;
    --shadow:    0 1px 2px rgba(28, 31, 36, .06), 0 1px 8px rgba(28, 31, 36, .04);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono",
            monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--shade);
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 .75rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono, .ref { font-family: var(--mono); font-size: .9em; }

/* The design reference, DC-2026-000001. Monospace and slightly tightened so a
   column of them lines up and is scannable -- staff quote these to each other
   constantly. */
.ref { letter-spacing: -.01em; white-space: nowrap; }

/* --- Layout ------------------------------------------------------------- */

.topbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }

.nav {
    display: flex;
    gap: .15rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav a {
    display: block;
    padding: .35rem .7rem;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-weight: 500;
}
.nav a:hover { background: var(--shade); text-decoration: none; }
.nav a.is-current { background: var(--accent-wash); color: var(--accent-deep); }

.topbar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
    color: var(--ink-faint);
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.page-head .subtitle { color: var(--ink-faint); font-size: .9rem; margin: 0; }

/* --- Cards and panels --------------------------------------------------- */

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}

.panel-head {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.panel-head h2 { margin: 0; }

.panel-body { padding: 1rem; }
.panel-body > :last-child { margin-bottom: 0; }

/* Dashboard bucket cards. auto-fit so the row reflows on a phone without a
   media query per breakpoint. */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: .85rem 1rem;
    box-shadow: var(--shadow);
    display: block;
    color: var(--ink);
}
.card:hover { text-decoration: none; border-color: var(--accent); }
.card .n { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.card .k { font-size: .8rem; color: var(--ink-faint); }
.card.is-zero .n { color: var(--ink-faint); font-weight: 600; }

/* --- Tables ------------------------------------------------------------- */

/* The wrapper scrolls, not the page. A wide table is the one thing that
   reliably makes a whole page scroll sideways on a phone. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.list {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

table.list th,
table.list td {
    text-align: left;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

table.list th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-faint);
    font-weight: 600;
    white-space: nowrap;
    background: var(--shade);
}

table.list tbody tr:hover { background: var(--shade); }
table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list td.tight { white-space: nowrap; }

.empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ink-faint);
}
.empty strong { display: block; color: var(--ink-soft); margin-bottom: .25rem; }

/* --- Badges ------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-ok    { color: var(--tone-ok);    background: var(--tone-ok-bg); }
.badge-final { color: var(--tone-final); background: var(--tone-final-bg); }
.badge-warn  { color: var(--tone-warn);  background: var(--tone-warn-bg); }
.badge-busy  { color: var(--tone-busy);  background: var(--tone-busy-bg); }
.badge-info  { color: var(--tone-info);  background: var(--tone-info-bg); }
.badge-idle  { color: var(--tone-idle);  background: var(--tone-idle-bg); }
.badge-mute  { color: var(--tone-mute);  background: var(--tone-mute-bg); }
.badge-bad   { color: var(--tone-bad);   background: var(--tone-bad-bg); }

.chip {
    display: inline-block;
    padding: .1rem .45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .75rem;
    color: var(--ink-soft);
    background: var(--shade);
    margin: 0 .15rem .15rem 0;
    white-space: nowrap;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-block;
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    font-size: .9rem;
    cursor: pointer;
    text-align: center;

    /* PRD section 63 asks for large review buttons. 44px is the accepted
       minimum touch target -- below it, precise tapping on a phone becomes a
       game, and the client review screen is the one people use on a phone. */
    min-height: 44px;
    line-height: 1.6;
}
.btn:hover { background: var(--shade); text-decoration: none; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn-danger { color: var(--tone-bad); border-color: #e6c3c3; }
.btn-danger:hover { background: var(--tone-bad-bg); }

.btn-sm { padding: .25rem .6rem; min-height: 32px; font-size: .82rem; line-height: 1.5; }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* --- Forms -------------------------------------------------------------- */

.field { margin-bottom: 1rem; }

.field > label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .25rem;
}

.field .hint {
    font-size: .8rem;
    color: var(--ink-faint);
    margin: .2rem 0 0;
}

.field .err {
    font-size: .82rem;
    color: var(--tone-bad);
    margin: .25rem 0 0;
    font-weight: 500;
}

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=url], input[type=tel], input[type=number], select, textarea {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: .92rem;
    color: var(--ink);
    background: var(--paper);
    min-height: 42px;
}

textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--tone-bad); }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }

@media (min-width: 700px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Checkbox and radio groups: the label wraps the control so the whole thing is
   tappable, which matters far more on a phone than the saved markup. */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .4rem;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
    font-size: .9rem;
    min-height: 44px;
}
.check:hover { background: var(--shade); }
.check input { width: auto; min-height: 0; margin-top: .2rem; flex: 0 0 auto; }
.check.is-on { border-color: var(--accent); background: var(--accent-wash); }
.check .d { display: block; font-size: .78rem; color: var(--ink-faint); }

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem;
    margin: 0 0 1rem;
}
legend { font-weight: 600; font-size: .875rem; padding: 0 .35rem; }

/* --- Flash messages ----------------------------------------------------- */

.flash {
    padding: .7rem .9rem;
    border-radius: var(--radius);
    margin-bottom: .75rem;
    font-size: .9rem;
    border: 1px solid transparent;
}
.flash-ok    { background: var(--tone-ok-bg);   color: var(--tone-ok);   border-color: #bfe0cd; }
.flash-warn  { background: var(--tone-warn-bg); color: var(--tone-warn); border-color: #f0d7ae; }
.flash-error { background: var(--tone-bad-bg);  color: var(--tone-bad);  border-color: #e8c2c2; }
.flash-info  { background: var(--tone-busy-bg); color: var(--tone-busy); border-color: #c4d8f2; }

/* A standing notice, not a transient flash: used for the duplicate-schedule
   warning and for the "this arrives in a later phase" notes. */
.notice {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: var(--paper);
    border-radius: var(--radius);
    padding: .7rem .9rem;
    font-size: .9rem;
    margin-bottom: 1rem;
}
.notice-warn { border-left-color: var(--tone-warn); background: var(--tone-warn-bg); }
.notice h3 { font-size: .9rem; margin-bottom: .25rem; }
.notice > :last-child { margin-bottom: 0; }

/* --- Definition lists (detail screens) ---------------------------------- */

.dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }

.dl > div {
    display: flex;
    gap: .75rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--shade-deep);
    font-size: .9rem;
}
.dl > div:last-child { border-bottom: 0; }
.dl dt { flex: 0 0 40%; color: var(--ink-faint); margin: 0; }
.dl dd { flex: 1 1 auto; margin: 0; min-width: 0; overflow-wrap: break-word; }

@media (min-width: 900px) {
    .dl.dl-2col { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

/* --- Timeline ----------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }

.timeline li {
    position: relative;
    padding: 0 0 .9rem 1.25rem;
    border-left: 2px solid var(--shade-deep);
    font-size: .9rem;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }

.timeline li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: .45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.timeline .when {
    display: block;
    font-size: .78rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

/* --- Filter bar --------------------------------------------------------- */

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
    align-items: end;
}
.filters .field { margin-bottom: 0; }
.filters label { font-size: .78rem; }

/* --- Sign-in page ------------------------------------------------------- */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--shade);
}

.auth-box {
    width: 100%;
    max-width: 380px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}
.auth-box h1 { font-size: 1.3rem; text-align: center; }
.auth-box .lead { text-align: center; color: var(--ink-faint); font-size: .875rem; }

/* --- Utility ------------------------------------------------------------ */

.muted { color: var(--ink-faint); }
.small { font-size: .82rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mb0 { margin-bottom: 0; }
.mt1 { margin-top: 1rem; }
.stack > * + * { margin-top: .6rem; }

/* Visually hidden but available to a screen reader -- used for table captions
   and for form labels that would be redundant on screen. */
.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;
}

/* --- Print -------------------------------------------------------------- */

@media print {
    .topbar, .btn, .filters { display: none; }
    body { background: #fff; }
    .panel { box-shadow: none; border-color: #bbb; }
}

/* ---------------------------------------------------------------------------
   The client review shell (Phase 5)
   ---------------------------------------------------------------------------
   Only what the internal shell does not already provide. The client page uses
   the same panels, badges and buttons on purpose: the review interface a client
   sees is the same tool, minus the navigation they must not have.

   `.topbar-user` needs the push here because the internal shell gets it for free
   from `.nav { flex: 1 1 auto }`, and the client shell has no nav at all.
   --------------------------------------------------------------------------- */

.client-review .topbar-user { margin-left: auto; }

.footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1rem 2.5rem;
    border-top: 1px solid var(--line);
}

/* The one-line "who are you" bar, shown until a reviewer names themselves. */
.identify-bar {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.identify-bar .field { margin-bottom: 0; flex: 1 1 14rem; }

/* ---------------------------------------------------------------------------
   THE CAPTION DIFF

   `<del>` and `<ins>` are the elements that MEAN removed and added, so the
   meaning survives a screen reader and a stylesheet that never loads. Colour is
   never the only signal: the strikethrough and the underline carry it for
   anybody who cannot separate the two hues.
   --------------------------------------------------------------------------- */

.diff-del {
    background: #fdecea;
    color: #8a1c14;
    text-decoration: line-through;
}

.diff-ins {
    background: #e7f6ec;
    color: #14612f;
    text-decoration: underline;
}

.caption-history {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
}

.caption-revision {
    border-top: 1px solid var(--line);
    padding: .75rem 0;
}

.caption-revision-head {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: baseline;
    margin-bottom: .35rem;
}

.caption-revision-field {
    margin-top: .5rem;
}

.caption-diff {
    /* A caption is prose and may be long; keep it readable rather than wide. */
    max-width: 62ch;
    line-height: 1.6;
    word-break: break-word;
}

.caption-body {
    max-width: 62ch;
    line-height: 1.6;
    white-space: normal;
}