/* Patron web (arturo#283): one column, phone first.

   Forge, the Patron app's look (the founder, 2026-11-03: "match the UI for
   Spyder to the same iOS UI we have in the Patron app"). Every colour is a
   token from the-smithy1/mobile/patron SmithyPatron/Theme/Forge.swift, under
   the same name: cold-iron surfaces, hot-ember accents, brass for what needs
   you, green for live. Dark only, as the app is. The one departure: captions
   and quiet lines use textCool, not the app's textFaint, because textFaint
   on coal is 3.2:1 and a web page must reach 4.5:1 at these sizes. */

:root {
    color-scheme: dark;

    /* Foundation */
    --pw-coal: #131418;
    --pw-rail: #191b20;
    --pw-card: #22252b;
    --pw-card-raised: #1b1d23;
    --pw-hairline: #262a31;
    --pw-hairline-strong: #2a2e35;

    /* Forge accents */
    --pw-ember: #ff6b2c;
    --pw-ember-soft: #ff8a4a;
    --pw-brass: #c9a05e;
    --pw-brass-bright: #d7b36a;
    --pw-on-ember: #1a120c;

    /* Text */
    --pw-text: #f4f1eb;
    --pw-muted: #9fa3ab;
    --pw-faint: #62666e;

    /* Status */
    --pw-green: #79a87c;
    --pw-silver: #c0c0c0;

    /* The app's washes: the accent at 16% over coal, opaque. */
    --pw-ember-wash: #39221b;
    --pw-brass-wash: #302a23;

    /* The names the rest of this file was written in. */
    --pw-bg: var(--pw-coal);
    --pw-surface: var(--pw-card);
    --pw-line: var(--pw-hairline);
    --pw-accent: var(--pw-ember);
    --pw-accent-text: var(--pw-on-ember);
    --pw-client: var(--pw-ember-wash);
    --pw-spyder: var(--pw-card);

    /* The app's type: SF Pro, on the text styles' sizes. */
    --pw-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
    --pw-body: 17px;
    --pw-callout: 16px;
    --pw-footnote: 13px;
    --pw-eyebrow-size: 11px;
}

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

body {
    margin: 0;
    background: var(--pw-bg);
    color: var(--pw-text);
    font: var(--pw-body)/1.4 var(--pw-font);
    -webkit-font-smoothing: antialiased;
}

.pw {
    max-width: 44rem;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pw-unbound,
.pw-phase,
.pw-status,
.pw-notice,
.pw-waiting {
    margin: 0;
    color: var(--pw-muted);
    font-size: var(--pw-footnote);
}

.pw-unbound {
    font-size: var(--pw-callout);
}

.pw-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pw-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* The app's screen title: .title, semibold. */
.pw-title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

/* Their own site, one tap away — a new tab, so the conversation is kept. A
   quiet pill's brass words. */
.pw-site {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--pw-brass-bright);
    font-size: var(--pw-callout);
    font-weight: 600;
    text-decoration: none;
}

.pw-site::after {
    content: "\2197" / "";
    margin-left: 4px;
}

.pw-site:focus-visible {
    outline: 3px solid var(--pw-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* The conversation sits on the field, as the app's does: no box around it. */
.pw-chat {
    background: none;
    border: 0;
    padding: 0;
}

/* The heading names the log for a screen reader; the app shows none. */
.pw-chat > .pw-eyebrow,
.pw-composer > .pw-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The request as Spyder read it back: the app's read-back card, ringed in
   ember. */
.pw-draft {
    background: var(--pw-card);
    border: 1.5px solid rgba(255, 107, 44, 0.6);
    border-radius: 16px;
    padding: 16px;
}

.pw-draft > .pw-eyebrow {
    color: var(--pw-ember);
}

/* The app's section caption: small, semibold, uppercase, widely spaced. */
.pw-eyebrow {
    margin: 0 0 8px;
    font-size: var(--pw-eyebrow-size);
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw-fields {
    margin: 8px 0;
}

.pw-fields dt {
    margin-top: 10px;
    font-size: var(--pw-eyebrow-size);
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw-fields dt:first-child {
    margin-top: 0;
}

.pw-fields dd {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

/* The card's title: .title3, semibold. */
#pw-draft-title {
    font-size: 20px;
    font-weight: 600;
}

#pw-draft-summary {
    font-size: var(--pw-callout);
    color: var(--pw-muted);
}

.pw-criteria {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--pw-callout);
}

.pw-criteria li::marker {
    color: var(--pw-green);
}

.pw-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A line is a bubble, the app's ChatBubble: 18pt corners with a 6pt corner
   at the speaker's foot, and 48pt kept clear on the other side. */
.pw-line {
    max-width: calc(100% - 48px);
    padding: 10px 14px;
    border-radius: 18px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.pw-line-client {
    align-self: flex-end;
    background: var(--pw-client);
    border-bottom-right-radius: 6px;
}

.pw-line-spyder {
    align-self: flex-start;
    background: var(--pw-spyder);
    border-bottom-left-radius: 6px;
}

/* The team's answer to a held request: Spyder's side, raised, ringed in
   brass and captioned, as the app marks it. */
.pw-line-team {
    align-self: flex-start;
    background: var(--pw-card-raised);
    border: 1px solid rgba(201, 160, 94, 0.5);
    border-bottom-left-radius: 6px;
}

.pw-line-team::before {
    content: "The team";
    display: block;
    margin-bottom: 4px;
    font-size: var(--pw-eyebrow-size);
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--pw-brass-bright);
}

.pw-line-notice {
    align-self: flex-start;
    max-width: 100%;
    padding: 2px 4px;
    font-size: var(--pw-footnote);
    color: var(--pw-muted);
}

/* A line's words in their own bubble (.pw-said), with any answers it offers
   under it at the conversation's width: the app draws a question's options
   under its bubble, not in it. A line without the wrapper (a page still on an
   older script) is drawn as one bubble by the rules above. */
.pw-line:has(> .pw-said) {
    max-width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    white-space: normal;
}

.pw-line-client:has(> .pw-said) {
    align-items: flex-end;
}

.pw-line-team:has(> .pw-said)::before {
    content: none;
}

.pw-said {
    display: block;
    max-width: calc(100% - 48px);
    padding: 10px 14px;
    border-radius: 18px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.pw-line-client > .pw-said {
    background: var(--pw-client);
    border-bottom-right-radius: 6px;
}

.pw-line-spyder > .pw-said {
    background: var(--pw-spyder);
    border-bottom-left-radius: 6px;
}

.pw-line-team > .pw-said {
    background: var(--pw-card-raised);
    border: 1px solid rgba(201, 160, 94, 0.5);
    border-bottom-left-radius: 6px;
}

.pw-line-team > .pw-said::before {
    content: "The team";
    display: block;
    margin-bottom: 4px;
    font-size: var(--pw-eyebrow-size);
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--pw-brass-bright);
}

.pw-line-notice > .pw-said {
    max-width: 100%;
    padding: 2px 4px;
}

.pw-line > .pw-replies,
.pw-line > .pw-card {
    align-self: stretch;
}

/* Where the current request stands: one line under the conversation, and the
   hidden sources the server declared it and the connection notices in
   (arturo#340). */
.pw-standings-source,
.pw-notices-source {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pw-standing {
    margin: 8px 0 0;
    font-size: var(--pw-footnote);
    color: var(--pw-muted);
}

/* The app's composer: a raised bar under a hairline, the field a rounded
   card, and a round ember send. */
.pw-composer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 -20px;
    padding: 12px 16px;
    background: var(--pw-card-raised);
    border-top: 1px solid var(--pw-hairline);
}

.pw-label {
    font-weight: 600;
}

.pw-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Examples to start from: they fill the box, they never send. The app's
   example chips: outlined capsules. */
.pw-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.pw-chip {
    min-height: 36px;
    padding: 8px 14px;
    border: 1.5px solid var(--pw-hairline-strong);
    border-radius: 999px;
    background: none;
    color: var(--pw-text);
    font: inherit;
    font-size: var(--pw-callout);
    line-height: 1.2;
    cursor: pointer;
}

.pw-chip:focus-visible {
    outline: 3px solid var(--pw-accent);
    outline-offset: 2px;
}

/* The scripted answers, on a button: unlike the examples above they SEND, and
   they sit under the line that asked for them (arturo#339). The app's
   OptionButton: a full-width raised row ringed in brass. */
.pw-replies-source {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pw-replies {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    white-space: normal;
}

.pw-reply {
    width: 100%;
    min-height: 44px;
    padding: 13px 16px;
    border: 1px solid rgba(201, 160, 94, 0.45);
    border-radius: 12px;
    background: var(--pw-card-raised);
    color: var(--pw-text);
    font: inherit;
    font-size: var(--pw-callout);
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.pw-reply:focus-visible {
    outline: 3px solid var(--pw-accent);
    outline-offset: 2px;
}

/* Pearl's card: her options on those same buttons, and the server's line
   saying the message box is still a way out (arturo#347). */
.pw-card {
    margin: 10px 0 0;
    white-space: normal;
}

.pw-card .pw-replies {
    margin: 0;
}

.pw-card-free-text {
    margin: 6px 0 0;
    font-size: var(--pw-footnote);
    color: var(--pw-muted);
}

.pw-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 20px;
    background: var(--pw-card);
    color: var(--pw-text);
    font: inherit;
}

.pw-input::placeholder {
    color: var(--pw-muted);
}

/* The forms' submit and the reconnect: the app's primary pill. */
.pw-send,
.pw-reconnect {
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-accent);
    color: var(--pw-accent-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* In the composer, send is the app's round ember button with an up arrow. The
   word stays the button's name for a screen reader. */
.pw-composer .pw-send {
    flex: none;
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.pw-composer .pw-send::before {
    content: "\2191" / "";
    font-size: 20px;
    font-weight: 700;
    line-height: 44px;
}

.pw-send:disabled,
.pw-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* The way back after the connection drops: an outlined pill. */
.pw-reconnect {
    align-self: flex-start;
    background: none;
    border: 1.5px solid rgba(244, 241, 235, 0.55);
    color: var(--pw-text);
}

.pw-input:focus-visible,
.pw-send:focus-visible,
.pw-reconnect:focus-visible {
    outline: 3px solid var(--pw-accent);
    outline-offset: 2px;
}

.pw-account {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pw-signout {
    margin: 0;
}

/* The account's links: a quiet pill's brass words. */
.pw-account-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pw-brass-bright);
    font: inherit;
    font-size: var(--pw-callout);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.pw-account-link:focus-visible {
    outline: 3px solid var(--pw-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* The password change, the sign-in page a client is handed (engine/core#337)
   and the four password-reset pages (arturo#335, piece 8): one column, the
   same fields. The app's sign-in (smithy-auth in Forge): a large title, card
   fields and a full-width ember pill. */
.pw-password,
.pw-signin,
.pw-reset {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#patron-signin .pw-title {
    font-size: 34px;
    margin-top: 24px;
}

.pw-tenant {
    margin: 0;
    color: var(--pw-muted);
    font-size: var(--pw-callout);
}

.pw-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pw-field .pw-label,
.pw-field label {
    font-size: var(--pw-footnote);
    font-weight: 600;
    color: var(--pw-muted);
}

.pw-field input {
    min-height: 50px;
    padding: 10px 16px;
    border: 1px solid var(--pw-hairline-strong);
    border-radius: 12px;
    background: var(--pw-card);
    color: var(--pw-text);
    font: inherit;
}

.pw-field input:focus-visible {
    outline: 2px solid var(--pw-accent);
    outline-offset: 1px;
}

/* The app's banner: one line saying why, on the ember wash, with a dot. */
.pw-errors {
    margin: 0;
    padding: 10px 14px 10px 30px;
    border-radius: 12px;
    background: var(--pw-ember-wash);
    color: var(--pw-text);
    font-size: var(--pw-footnote);
}

.pw-errors li::marker {
    color: var(--pw-ember);
}

.pw-help {
    margin: 0;
    color: var(--pw-muted);
    font-size: var(--pw-footnote);
}

.pw-help .pw-account-link {
    min-height: 0;
    display: inline;
    font-size: inherit;
}

.pw-password .pw-send,
.pw-signin .pw-send,
.pw-reset .pw-send {
    align-self: stretch;
}

/* What waits on the client's OK (engine/core#351): a card per change, with a
   miniature of its page and the app's answers, drawn IN the conversation
   after the line that was last when the change was listed (the founder's
   owner walk, 2026-10-04). Full width, unlike a line. One column on a phone;
   the miniature beside the words from 600px. The app's card, ringed in brass:
   brass is what needs you. */
.pw-change {
    align-self: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    background: var(--pw-card);
    border: 1.5px solid var(--pw-brass);
    border-radius: 16px;
    padding: 16px;
}

.pw-change-eyebrow {
    margin: 0 0 4px;
    color: var(--pw-brass);
}

.pw-change-head {
    min-width: 0;
}

.pw-change-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.pw-change-summary {
    margin: 6px 0 0;
    font-size: var(--pw-callout);
    color: var(--pw-muted);
    overflow-wrap: anywhere;
}

.pw-change-label {
    margin: 10px 0 2px;
    font-size: var(--pw-eyebrow-size);
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw-change-head .pw-criteria li {
    overflow-wrap: anywhere;
}

/* The miniature: the page drawn at a phone's width and scaled down, which
   nothing inside can be reached through — the link under it is the way in,
   and it covers the miniature, so a tap anywhere on it opens the page. */
.pw-change-sight {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    justify-self: start;
}

.pw-change-frame {
    display: block;
    width: 176px;
    height: 288px;
    overflow: hidden;
    border: 1px solid var(--pw-hairline-strong);
    border-radius: 12px;
    background: #ffffff;
}

.pw-change-frame iframe {
    display: block;
    width: 390px;
    height: 640px;
    border: 0;
    transform: scale(0.45);
    transform-origin: 0 0;
    pointer-events: none;
}

.pw-change-open,
.pw-change-live {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--pw-brass-bright);
    font-size: var(--pw-callout);
    font-weight: 600;
    text-decoration: none;
}

.pw-change-open::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}

.pw-change-open:focus-visible,
.pw-change-live:focus-visible {
    outline: 3px solid var(--pw-accent);
    outline-offset: 2px;
}

.pw-change-verbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pw-change-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The answers: the app's pills. The decision is the ember pill; the others
   are outlined. */
.pw-change-answer,
.pw-change-yes,
.pw-change-cancel {
    min-height: 50px;
    padding: 0 20px;
    border: 1.5px solid rgba(244, 241, 235, 0.55);
    border-radius: 999px;
    background: none;
    color: var(--pw-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pw-change-decision,
.pw-change-yes {
    border-color: var(--pw-accent);
    background: var(--pw-accent);
    color: var(--pw-accent-text);
}

.pw-change-answer:disabled,
.pw-change-yes:disabled,
.pw-change-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pw-change-answer:focus-visible,
.pw-change-yes:focus-visible,
.pw-change-cancel:focus-visible {
    outline: 3px solid var(--pw-accent);
    outline-offset: 2px;
}

.pw-change-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--pw-card-raised);
    border: 1px solid var(--pw-hairline-strong);
}

.pw-change-confirm-line {
    flex-basis: 100%;
    margin: 0;
}

.pw-change-words {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pw-change-hint {
    margin: 0;
    font-size: var(--pw-footnote);
    color: var(--pw-ember-soft);
}

.pw-change-waits,
.pw-change-why,
.pw-change-long,
.pw-change-sending {
    margin: 0;
    font-size: var(--pw-footnote);
    color: var(--pw-muted);
}

.pw-change-answered {
    margin: 12px 0 0;
    color: var(--pw-muted);
    font-size: var(--pw-callout);
    overflow-wrap: anywhere;
}

.pw-change-answered:empty {
    display: none;
}

@media (min-width: 600px) {
    .pw-change {
        grid-template-columns: 178px minmax(0, 1fr);
        grid-template-areas:
            "sight head"
            "sight verbs";
        column-gap: 20px;
        align-items: start;
    }

    .pw-change-head {
        grid-area: head;
    }

    .pw-change-sight,
    .pw-change-waits {
        grid-area: sight;
    }

    .pw-change-verbs {
        grid-area: verbs;
    }
}

/* The posts waiting on the client (saga the-smithy1/agents/arturo#617): one
   card per post above the conversation, its media first, then its caption,
   where and when, and the two answers. The app's card, ringed in brass. */
.pw-posts {
    margin: 0 0 16px;
}

.pw-post-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pw-post {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--pw-card);
    border: 1.5px solid var(--pw-brass);
    border-radius: 16px;
    padding: 16px;
}

.pw-post-media {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.pw-post-media img,
.pw-post-media video {
    display: block;
    max-height: 240px;
    max-width: 100%;
    border: 1px solid var(--pw-hairline-strong);
    border-radius: 12px;
    background: #ffffff;
}

.pw-post-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.pw-post-cry {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pw-post-where,
.pw-post-when,
.pw-post-empty,
.pw-post-long {
    margin: 0;
    font-size: var(--pw-footnote);
    color: var(--pw-muted);
}

.pw-post-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pw-post-answer,
.pw-post-cancel {
    min-height: 50px;
    padding: 0 20px;
    border: 1.5px solid rgba(244, 241, 235, 0.55);
    border-radius: 999px;
    background: none;
    color: var(--pw-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pw-post-approve {
    border-color: var(--pw-accent);
    background: var(--pw-accent);
    color: var(--pw-accent-text);
}

.pw-post-answer:disabled,
.pw-post-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pw-post-answer:focus-visible,
.pw-post-cancel:focus-visible {
    outline: 3px solid var(--pw-accent);
    outline-offset: 2px;
}

.pw-post-words {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pw-post-sent {
    margin: 0;
    color: var(--pw-muted);
}

.pw-post-sent:empty {
    display: none;
}

[hidden] {
    display: none !important;
}

/* Inside a client site's Spyder panel (engine/core#462): the panel draws
   Spyder's header and the page's name above this page, so the page's own
   heading steps aside. Set by patron-web-embed.js, only when framed by a
   site PATRON_EMBED_ORIGINS names. */
.pw-embedded .pw-header {
    display: none;
}