/* Project Client Satisfaction Survey -- client-facing styles.
 *
 * Ported from the design of record: ui_kits/client-survey/index.html in the
 * jobe-design-system Claude Design project (738950ca-99a2-4a6b-82dc-552a09520cd3).
 *
 * PHONE FIRST. A client opening an emailed link is more likely on a phone than a
 * desktop, so 375px is the design target and the wide layout is the relaxed
 * version. Verified with a same-origin iframe measuring scrollWidth - innerWidth
 * at 375 / 768 / 1440. Do not use resize_window to check this -- it is a no-op in
 * the agent environment AND returns success.
 *
 * NO EXTERNAL RESOURCES. Fonts and images are self-hosted. The page URL contains
 * a capability token, so there must be nowhere for a Referer header to leak to.
 */

@font-face {
    font-family: 'Cormorant';
    src: url('../assets/fonts/Cormorant-Light.woff2') format('woff2');
    font-weight: 300 500;
    font-display: swap;
}

:root {
    --navy: #023047;
    --steel: #527B96;
    --steel-dark: #285A78;
    --sand: #F7EEE3;
    --sand-deep: #F5EBDE;
    --sand-line: #D9CEBF;
    --ink: #1F2A31;
    --ink-soft: #5B6B75;
    --amber-ink: #8A5A16;
    --amber: #C98A2B;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--sand);
    color: var(--ink);
    font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.serif { font-family: Cormorant, "Cormorant Garamond", Georgia, "Times New Roman", serif; }

.wrap { max-width: 660px; margin: 0 auto; padding: 0 20px 80px; }
header.mast { padding: 34px 0 0; }
.logo { display: block; height: 34px; width: auto; }

.card {
    background: #fff;
    border: 1px solid var(--sand-line);
    border-radius: 6px;
    margin-top: 26px;
    padding: 32px 26px;
}

h1 {
    font-family: Cormorant, "Cormorant Garamond", Georgia, serif;
    font-weight: 400; font-size: 40px; line-height: 1.1;
    letter-spacing: -.01em; color: var(--navy); margin: 0;
}

.lede { margin: 16px 0 0; font-size: 17px; max-width: 44ch; text-wrap: pretty; }

.project {
    margin: 20px 0 0; padding-top: 18px;
    border-top: 1px solid #E9E2D7;
    font-size: 15px; color: var(--ink-soft);
}
.project b { display: block; color: var(--navy); font-weight: 600; font-size: 17px; }

/* The client's notice of who reads their answers. Sits above the questions
 * because consent after the fact is not consent. */
.audience {
    margin: 22px 0 0; padding: 16px 18px;
    background: var(--sand-deep); border-radius: 5px;
    font-size: 15px; line-height: 1.5; color: #3D4B54; text-wrap: pretty;
}

.status {
    min-height: 22px; margin: 14px 0 0; font-size: 14px;
    color: var(--ink-soft); display: flex; align-items: center; gap: 8px;
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); flex: none; }
.status.warn { color: var(--amber-ink); }
.status.warn .dot { background: var(--amber); }

.block { margin-top: 34px; }
.block h2 {
    font-family: Cormorant, "Cormorant Garamond", Georgia, serif;
    font-weight: 500; font-size: 27px; color: var(--navy);
    margin: 0; letter-spacing: -.005em;
}
.block .sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }

/* The scale legend prints ONCE per block, aligned to the button grid below it.
 * The draft was a five-column checkbox matrix; that cannot survive 375px without
 * either scrolling sideways or squeezing the columns to nothing. */
.legend {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 6px; margin: 16px 0 2px;
}
.legend span { font-size: 11px; line-height: 1.25; color: var(--ink-soft); text-align: center; }

.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.q { padding: 16px 0 18px; border-top: 1px solid #EDE6DB; }
.q-text {
    margin: 0 0 12px; font-size: 16.5px; line-height: 1.45;
    display: flex; gap: 10px; text-wrap: pretty;
}
.q-n { color: var(--steel); font-variant-numeric: tabular-nums; font-weight: 600; flex: none; min-width: 20px; }

.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

/* 48px minimum so the target is comfortable on a phone. */
.opt {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 48px; border: 1px solid #CFD8DE; border-radius: 5px;
    background: #FCFCFB; font-size: 16px; font-weight: 600; color: var(--steel-dark);
    cursor: pointer; transition: background .12s, border-color .12s;
}
.opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt:hover { background: #F1F5F7; }
.opt.on { background: var(--steel); border-color: var(--steel-dark); color: #fff; }
.opt input:focus-visible + .num {
    outline: 3px solid rgba(82, 123, 150, .45); outline-offset: 4px; border-radius: 3px;
}

.q.missing {
    background: #FBF7F1; border-radius: 5px;
    padding-left: 12px; padding-right: 12px;
    margin-left: -12px; margin-right: -12px;
    box-shadow: inset 3px 0 0 var(--amber);
}
.q .miss { display: none; margin: 10px 0 0; font-size: 13.5px; color: var(--amber-ink); }
.q.missing .miss { display: block; }

/* Eleven options. Six across on a phone, all eleven from 560px. */
.nps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 12px; }
.anchors { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }

/* 16px so iOS does not zoom the viewport when the field is focused. */
textarea {
    width: 100%; min-height: 150px; margin-top: 12px; padding: 14px;
    border: 1px solid #CFD8DE; border-radius: 5px;
    font: inherit; font-size: 16px; line-height: 1.5;
    color: var(--ink); background: #FCFCFB; resize: vertical;
}
textarea:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(82, 123, 150, .35); }
.count { margin-top: 6px; font-size: 13px; color: var(--ink-soft); text-align: right; }
.optional { font-size: 13px; color: var(--ink-soft); font-weight: 400; }

.submit-area { margin-top: 36px; padding-top: 26px; border-top: 1px solid #EDE6DB; }
button.send {
    width: 100%; min-height: 54px; padding: 0 24px; border: 0; border-radius: 5px;
    background: var(--navy); color: #fff; font: inherit; font-size: 17px; font-weight: 600;
    cursor: pointer; transition: background .12s;
}
button.send:hover { background: #0A3F5C; }
button.send[disabled] { opacity: .55; cursor: progress; }
.after { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); text-align: center; }

/* Notices. Expired, revoked and already-submitted are NOT errors and must not
 * look like one -- a client who is late is not at fault. No red anywhere. */
.alert {
    margin: 0 0 18px; padding: 14px 16px; border-radius: 5px;
    font-size: 15px; line-height: 1.5;
    background: var(--sand-deep); border: 1px solid var(--sand-line); color: #3D4B54;
}
.alert b { display: block; color: var(--navy); font-weight: 600; margin-bottom: 2px; }

.notice h1 { font-size: 34px; }
.notice p { font-size: 17px; line-height: 1.6; color: #3D4B54; max-width: 46ch; text-wrap: pretty; }
.notice .meta {
    margin-top: 26px; padding-top: 18px; border-top: 1px solid #EDE6DB;
    font-size: 15px; color: var(--ink-soft);
}

footer.foot { margin: 28px 0 0; font-size: 13px; color: #7C8A93; text-align: center; line-height: 1.6; }

.skeleton { height: 14px; border-radius: 3px; background: #EFE9E0; margin-bottom: 12px; }

a { color: var(--steel-dark); }
a:hover { color: var(--navy); }

@media (min-width: 560px) {
    .nps { grid-template-columns: repeat(11, 1fr); }
    .card { padding: 44px 40px; }
    h1 { font-size: 46px; }
    .legend span { font-size: 12px; }
}

@media (max-width: 400px) {
    .opt { font-size: 15px; }
    .wrap { padding: 0 14px 60px; }
    .card { padding: 26px 18px; }
    h1 { font-size: 34px; }
}

/* The receipt on the thank-you page. */
.receipt { margin-top: 14px; border: 1px solid #E9E2D7; border-radius: 5px; overflow: hidden; }
.rrow { display: flex; gap: 14px; align-items: baseline; padding: 11px 14px; border-bottom: 1px solid #F0EAE1; font-size: 15.5px; }
.rrow:last-child { border-bottom: 0; }
.rrow:nth-child(odd) { background: #FBF8F3; }
.rn { color: var(--steel); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 20px; flex: none; }
.rq { flex: 1; line-height: 1.4; text-wrap: pretty; }
.ra { flex: none; font-weight: 600; color: var(--navy); text-align: right; min-width: 96px; font-size: 14.5px; }
.group { padding: 9px 14px; background: var(--sand-deep); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-dark); }
.written { margin-top: 12px; padding: 16px 18px; background: #FBF8F3; border: 1px solid #E9E2D7; border-radius: 5px; font-size: 16px; line-height: 1.6; color: #3D4B54; white-space: pre-wrap; text-wrap: pretty; }
h2.section { font-family: Cormorant, "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 26px; color: var(--navy); margin: 34px 0 0; }
.actions { display: flex; gap: 10px; margin-top: 24px; }
button.print { min-height: 46px; padding: 0 20px; border: 1px solid #CFD8DE; border-radius: 5px; background: #fff; color: var(--steel-dark); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
button.print:hover { background: #F1F5F7; }

@media (max-width: 400px) { .ra { min-width: 78px; } }

@media print {
    body { background: #fff; font-size: 11pt; }
    .wrap { max-width: none; padding: 0; }
    .card { border: 0; margin: 0; padding: 0; }
    .actions, footer.foot { display: none; }
    .rrow:nth-child(odd) { background: #fff; }
    .receipt { border-color: #ccc; }
    h1 { font-size: 26pt; }
}