/* ---------------------------------------------------------------------------
   The Weeks Law Firm — client portal

   Palette from the firm mark: navy #00005A carries structure and every primary
   action, red #9E0000 stays scarce so it keeps its meaning — required fields,
   errors, and the one thing on a page needing the client's attention. Body
   copy is #333333 rather than black, which reads more calmly across the long
   stretches of form this application is made of.

   The logo is a white-background PNG with no alpha, so the page stays white
   behind it. Sunken surfaces carry notices and disabled fields instead of
   tinting the page itself.

   Segoe UI throughout — the system face on the server and on most clients'
   machines, so it renders with no webfont round trip.
   --------------------------------------------------------------------------- */

:root {
    --navy:       #00005a;
    --navy-lift:  #1a1a75;
    --red:        #9e0000;
    --ink:        #333333;
    --ink-soft:   #6b6b73;
    --green:      #1f6b45;

    --paper:      #ffffff;
    --paper-sunk: #f4f4f7;
    --rule:       #d9d9e0;

    --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
            "Helvetica Neue", Arial, sans-serif;

    --measure: 36rem;
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Masthead ----------------------------------------------------------- */

.masthead {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    /* Thin red keyline echoing the rules that flank "THE" in the mark. */
    box-shadow: inset 0 -4px 0 -3px var(--red);
}

.masthead__logo { display: block; line-height: 0; }
.masthead__logo img { display: block; width: 150px; height: auto; }

.masthead__session {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.masthead__session a { color: var(--navy); text-decoration: none; }
.masthead__session a:hover { text-decoration: underline; }
.masthead__session form { margin: 0 0 0 1rem; }  /* margin not gap: older engines ignore flex gap */

/* Sign-out is a POST so it cannot be triggered by a stray image tag, but it
   should still read as a link rather than a button competing with the page's
   primary action. */
.linkbutton {
    font-family: inherit;
    font-size: inherit;
    color: var(--navy);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.linkbutton:hover { text-decoration: underline; }
.linkbutton:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* --- Sheet -------------------------------------------------------------- */

.sheet {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2.75rem 1.75rem 4rem;
}

h1 {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin: 0 0 0.625rem;
}

h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--navy);
    margin: 2.5rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

.sheet > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }

.lede { color: var(--ink-soft); margin: 0 0 2rem; }
p { margin: 0 0 1rem; }
a { color: var(--navy); }
a:hover { color: var(--navy-lift); }

/* --- Notices ------------------------------------------------------------ */

.notice {
    font-size: 0.9375rem;
    line-height: 1.5;
    padding: 0.8125rem 1rem;
    margin: 0 0 1.5rem;
    background: var(--paper-sunk);
    border-left: 3px solid var(--navy);
}

.notice--error   { border-left-color: var(--red); }
.notice--success { border-left-color: var(--green); }

/* --- Fields ------------------------------------------------------------- */

.field { margin: 0 0 1.375rem; }

.field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.3125rem;
}

.req { color: var(--red); }

/* Radios and checkboxes are excluded: the generic sizing below stretched them
   to full width with a border and a white background, which rendered as an
   empty box where the yes/no control should be. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    padding: 0.5625rem 0.6875rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
}

.field input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.field select:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 1px;
    border-color: var(--navy);
}

.field input:not([type="radio"]):not([type="checkbox"]):disabled {
    background: var(--paper-sunk);
    color: var(--ink-soft);
}

.field__origin,
.field__query {
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0 0 0.375rem;
    color: var(--ink-soft);
}

/* An open query is the one thing on the page the client must act on. */
.field__query { color: var(--red); font-weight: 600; }
.field--query input { border-color: var(--red); }
.field--query input:focus-visible { outline-color: var(--red); border-color: var(--red); }

.field--locked label { color: var(--ink-soft); }

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

.button {
    display: inline-block;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.6875rem 1.375rem;
    border: 1px solid var(--navy);
    border-radius: 3px;
    background: var(--navy);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.button:hover { background: var(--navy-lift); border-color: var(--navy-lift); color: #fff; }
.button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.button--quiet { background: #fff; color: var(--navy); border-color: var(--rule); }
.button--quiet:hover { background: var(--paper-sunk); color: var(--navy); }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

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

.queue { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

.queue th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    color: var(--navy);
    padding: 0 0.75rem 0.5rem 0;
    border-bottom: 2px solid var(--navy);
}

.queue td {
    padding: 0.6875rem 0.75rem 0.6875rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: baseline;
}

.status { font-size: 0.75rem; color: var(--ink-soft); white-space: nowrap; }
.status--submitted,
.status--changes_requested { color: var(--red); font-weight: 600; }
.status--approved,
.status--delivered { color: var(--green); font-weight: 600; }

.empty { font-size: 0.9375rem; color: var(--ink-soft); padding: 2rem 0; }

/* --- Colophon ----------------------------------------------------------- */

.colophon {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1.5rem 1.75rem 3rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8125rem;
    color: var(--ink-soft);
}


/* --- Login -------------------------------------------------------------- */

.sheet--narrow { max-width: 24rem; margin: 0 auto; padding-top: 1.5rem; }

@media (max-width: 30rem) {
    .sheet { padding: 2rem 1.25rem 3rem; }
    .masthead { padding: 1rem 1.25rem; }
    .masthead__logo img { width: 128px; }
    h1 { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --- Progress ----------------------------------------------------------- */

.progress { margin: 0 0 2.25rem; }

.progress__track {
    height: 4px;
    background: var(--rule);
    border-radius: 2px;
    overflow: hidden;
}

.progress__fill { height: 100%; background: var(--navy); }

.progress__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.75rem;
}

/* Margin as well as gap: older engines ignore flex gap and the steps run
   together into one unreadable string. */
.progress__step { margin-right: 1rem; }

.progress__step a { color: var(--navy); text-decoration: none; }
.progress__step a:hover { text-decoration: underline; }
.progress__step.is-current > span { color: var(--red); font-weight: 700; }
.progress__step.is-locked > span { color: #a8a8b0; }
.progress__step.is-done a::before { content: "\2713\00a0"; }

/* --- Choice (yes/no and other radio groups) ----------------------------- */

.choice { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.field .choice__opt,
.choice__opt {
    display: inline-block;   /* inline-block + inline children keeps the radio
                                beside its label even where flex gap is ignored */
    white-space: nowrap;
    gap: 0.4375rem;
    font-weight: 400;
    padding: 0.5rem 1.125rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    cursor: pointer;
    margin: 0 0.5rem 0 0;
}

.choice__opt input {
    width: auto;
    margin-right: 0.4375rem;
    vertical-align: middle;
    accent-color: var(--navy);
}
.choice__opt span { vertical-align: middle; }

.choice__opt:hover { border-color: var(--navy); }
.choice__opt input { margin: 0; accent-color: var(--navy); }
.choice__opt:has(input:checked) { border-color: var(--navy); background: var(--paper-sunk); }

/* --- Money -------------------------------------------------------------- */

.money { display: flex; align-items: center; max-width: 12rem; }

.money__sign {
    padding: 0.5625rem 0.5rem;
    border: 1px solid var(--rule);
    border-right: 0;
    border-radius: 3px 0 0 3px;
    background: var(--paper-sunk);
    color: var(--ink-soft);
}

.money input { border-radius: 0 3px 3px 0; }

/* --- Textarea ----------------------------------------------------------- */

.field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background: #fff;
    padding: 0.5625rem 0.6875rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    resize: vertical;
}

.field textarea:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 1px;
    border-color: var(--navy);
}

/* --- Help and errors ---------------------------------------------------- */

.field__help {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink-soft);
    margin: 0 0 0.375rem;
}

.field__error {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--red);
    margin: 0 0 0.375rem;
}

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

.editlink { font-size: 0.75rem; font-weight: 400; margin-left: 0.5rem; }

/* Dependent fields are hidden by the browser as answers change. */
[data-depends][hidden] { display: none; }


/* --- Review screen ------------------------------------------------------ */

.reviewq {
    padding: 0 0 1.25rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.reviewq__tag {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin: -0.75rem 0 0.625rem;
}

.reviewq__tag--attested { color: var(--navy); }

.reviewq__open {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.625rem;
    background: var(--paper-sunk);
    border-left: 3px solid var(--red);
}

.reviewq__ask summary {
    font-size: 0.8125rem;
    color: var(--navy);
    cursor: pointer;
}

.reviewq__ask textarea {
    width: 100%;
    margin-top: 0.5rem;
    font-family: inherit;
    font-size: 0.9375rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
}

.reviewq__ask .choice__opt { margin-top: 0.5rem; }

/* --- Password requirements ---------------------------------------------- */

.pwreq {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: 0.875rem;
}

.pwreq__item {
    display: flex;
    align-items: flex-start;
    margin: 0 0 0.375rem;
    color: var(--ink-soft);
}

/* The mark is its own box so the text does not shift when the tick appears. */
.pwreq__mark {
    display: inline-block;
    width: 1.125rem;
    min-width: 1.125rem;
    margin-right: 0.4375rem;
    text-align: center;
    color: var(--rule);
}

.pwreq__mark::before { content: "\25CB"; }          /* hollow circle */

.pwreq__item.is-met { color: var(--green); }
.pwreq__item.is-met .pwreq__mark { color: var(--green); }
.pwreq__item.is-met .pwreq__mark::before { content: "\2713"; }   /* check */

.pwtoggle {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--navy);
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    cursor: pointer;
}

.pwtoggle svg {
    /* margin as well as any gap: older engines ignore flex gap */
    margin-right: 0.375rem;
    flex: 0 0 auto;
}

.pwtoggle:hover { text-decoration: underline; }
.pwtoggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* --- Guidance notes ------------------------------------------------------ */

.field--note {
    padding: 0.875rem 1rem;
    background: var(--paper-sunk);
    border-left: 3px solid var(--navy);
}

.field--note label { margin-bottom: 0.25rem; color: var(--navy); }
.field--note .field__help { margin: 0; color: var(--ink); }

/* The recommendation carries more weight than a plain note. */
.field--note[data-field="msa_note_recommended"] { border-left-color: var(--red); }
.field--note[data-field="msa_note_recommended"] label { color: var(--red); }

/* --- Grounds comparison -------------------------------------------------- */

/* The table needs more width than the reading measure, so it scrolls sideways
   on a narrow screen rather than squeezing six rows of prose into nothing. */
.compare-wrap {
    overflow-x: auto;
    margin: 0 0 0.75rem;
    -webkit-overflow-scrolling: touch;
}

.compare {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.compare caption {
    text-align: left;
    font-weight: 600;
    color: var(--navy);
    padding-bottom: 0.5rem;
}

.compare th,
.compare td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rule);
    vertical-align: top;
    text-align: left;
}

.compare thead th {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
}

.compare tbody th {
    background: var(--paper-sunk);
    font-weight: 600;
    width: 11rem;
}

.compare-note {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin: 0 0 2rem;
}

/* The comparison needs more width than the reading measure allows. On a wide
   screen let it break out of the column symmetrically rather than making
   people scroll sideways to reach the third ground. Below that it scrolls. */
@media (min-width: 58rem) {
    .compare-wrap {
        width: 52rem;
        margin-left: calc((var(--measure) - 52rem) / 2);
    }
    .compare { min-width: 0; }
}

.progress__count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 0.5rem;
}

/* --- Queue completion bar ------------------------------------------------ */

.bar {
    width: 4.5rem;
    height: 5px;
    background: var(--rule);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.1875rem;
}

.bar__fill { height: 100%; background: var(--navy); }

/* A client who has not looked in a fortnight is the one worth chasing. */
.status--stale { color: var(--red); font-weight: 600; }

.colophon p { margin: 0 0 0.625rem; }
.colophon p:last-child { margin-bottom: 0; }
.colophon a { color: var(--navy); }
.colophon strong { color: var(--ink); }

/* --- Client disclaimer, above the footer rule ---------------------------- */

.disclaimer {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 2rem 0 0;
}

.disclaimer strong { color: var(--ink); }
.disclaimer a { color: var(--navy); }

/* A section with no questions for this client. Struck through rather than
   merely dimmed, so it reads as "not needed" instead of "not yet reachable" —
   the two look identical when both are just grey. */
.progress__step.is-skipped > span {
    color: #b4b4bc;
    text-decoration: line-through;
}

/* --- Group heading inside a section -------------------------------------- */

.field--group {
    margin: 2rem 0 1rem;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--navy);
}

.field--group label {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
}

/* "What you receive" is a line or two, not a page. Narrower as well as
   shorter, so the shape of the field tells you how much to write. */
.field--compact { max-width: 24rem; }

/* --- Review screen error summary ----------------------------------------- */

.errsummary {
    border: 2px solid var(--red);
    border-left-width: 6px;
    background: #fdf6f6;
    padding: 1rem 1.125rem;
    margin: 0 0 2rem;
}

.errsummary__head {
    font-weight: 700;
    color: var(--red);
    margin: 0 0 0.625rem;
}

.errsummary ul {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.errsummary li { margin-bottom: 0.375rem; }
.errsummary li:last-child { margin-bottom: 0; }
.errsummary a { color: var(--red); font-weight: 600; }

/* A flagged answer in the listing below, so the summary link lands somewhere
   that is obviously the thing it named. */
/* Needs :disabled to outrank the generic disabled styling above, which is
   more specific than a plain class pair. */
.field--locked.field--error input:disabled {
    border-color: var(--red);
    background: #fdf6f6;
    color: var(--ink);
}

.field--locked.field--error label { color: var(--red); }

/* Prose that belongs on the page rather than in a guidance box. */
.field--prose { margin: 0 0 1.5rem; }
.field--prose .field__help {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
}

/* The Review entry sits apart from the numbered steps: a destination rather
   than another thing to finish, so it is set off and never ticked. */
.progress__step.is-review {
    margin-left: 0.25rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--rule);
}

.progress__step.is-review a { font-weight: 600; }
.progress__step.is-review a::after { content: " \2192"; }
.progress__step.is-review.is-current > span { color: var(--red); font-weight: 700; }

/* --- Confirmation dialog -------------------------------------------------- */

.modal {
    max-width: 30rem;
    padding: 1.75rem;
    border: 1px solid var(--rule);
    border-top: 4px solid var(--navy);
    border-radius: 3px;
    color: var(--ink);
    font-family: var(--sans);
}

.modal::backdrop { background: rgba(22, 35, 46, 0.55); }

.modal h2 {
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
    font-size: 1.25rem;
    color: var(--navy);
}

.modal p { margin: 0 0 1rem; }

.modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Margin as well as gap: older engines ignore flex gap. */
.modal__actions .button { margin: 0 0.75rem 0 0; }

/* The affirmative sits second, so a hurried click on the nearer button is the
   cautious one rather than the irreversible one. */
@media (max-width: 30rem) {
    .modal__actions { display: block; }
    .modal__actions .button { display: block; width: 100%; margin: 0 0 0.625rem; }
}