/* Assistants panel.
   One account, one panel: tabs separate the business assistant sections from
   the training screens, which keep their own styles in site.css. */

.panel-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(18px, 4vw, 48px);
}

.panel-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.panel-header h1 {
    margin: 4px 0 0;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.panel-intro {
    max-width: 70ch;
    margin-bottom: 0;
    color: var(--muted);
}

/* The panel's own status line reports the outcome of whatever was just done,
   which is worth seeing: as muted body text between the heading and the tabs
   it read as part of the furniture. It only takes up room once it says
   something. */
#panelStatus:not(:empty) {
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 11px;
    border-left: 4px solid var(--success);
    color: var(--ink);
    background: var(--lime-2);
    font-weight: 650;
}

#panelStatus.is-error:not(:empty) {
    border-left-color: var(--danger);
    background: #fde9e7;
}

#panelStatus:empty {
    min-height: 0;
    margin: 0;
}

/* A refusal must read as a refusal, not as muted help text. */
.form-status.is-error {
    color: var(--danger);
    font-weight: 700;
}


.panel-signed-out {
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel-signed-out h2 {
    margin-top: 0;
}


.panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 22px 0;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* A fully rounded bar only looks like a pill while its tabs are on one line.
   The console has six, which wrap on a phone into a shape with bites out of
   its corners, so below that width it becomes a plain rounded block. */
@media (max-width: 640px) {
    .panel-tabs {
        width: auto;
        border-radius: var(--radius);
    }
}

.panel-tab {
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    color: var(--muted);
    background: transparent;
    font-weight: 750;
    cursor: pointer;
}

.panel-tab:hover {
    color: var(--ink);
    background: var(--canvas);
}

.panel-tab[aria-selected='true'],
.panel-tab[aria-selected='true']:hover {
    color: var(--ink);
    background: var(--lime);
}

.panel-columns {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.panel-column {
    min-width: 0;
    padding: clamp(16px, 2.5vw, 24px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel-column h2 {
    margin: 0 0 14px;
    font-size: 1.15rem;
}

/* Which assistant is being edited, above the blocks that edit it. */
.panel-detail-head {
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ink);
}

.panel-detail-head h2 {
    margin: 0 0 4px;
    font-size: 1.3rem;
}

/* Three jobs on one screen -- naming it, teaching it, placing it -- so each
   gets a ruled band of its own rather than running together under headings
   that read as captions. */
.panel-block + .panel-block {
    margin-top: 10px;
    border-top: 1px solid var(--line);
}

.panel-block {
    padding: 20px 0 4px;
}

.panel-column h3 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.assistant-settings { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.assistant-settings-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.assistant-settings-row > div { min-width: 0; }
.assistant-settings-row label { display: block; margin: 7px 0 8px; font-size: .84rem; font-weight: 750; }
@media (max-width: 640px) { .assistant-settings-row { grid-template-columns: minmax(0, 1fr); } }

.panel-details {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--canvas);
}

.panel-details summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 11px 14px;
    font-weight: 750;
    cursor: pointer;
}

.panel-details .stack-form {
    padding: 0 14px 16px;
}

/* A stacked form is a grid, so a button placed directly in one is stretched
   to the full column. In a dialog that is wanted; across a panel it turns
   every action into a slab. Actions in a panel take their own width. */
.panel-shell .stack-form > button,
.panel-shell .stack-form > .btn-primary,
.panel-shell .stack-form > .btn-secondary {
    justify-self: start;
    margin-top: 6px;
}

.panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

/* A caveat sitting beside the button it applies to, rather than above the
   whole form where it reads as another instruction. */
.panel-actions > .field-hint {
    margin: 0;
}

.assistant-state {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.assistant-state[data-published='true'] {
    color: var(--success);
    font-weight: 700;
}

.assistant-list,
.deployment-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.deployment-empty {
    color: var(--muted);
    font-size: 0.86rem;
}

.assistant-select {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 13px;
    color: var(--ink);
    background: var(--canvas);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.assistant-select:hover {
    border-color: var(--ink);
}

/* Which assistant the detail column is showing. The bar on the leading edge
   is what carries at a glance; a border alone reads the same as hover. */
.assistant-select.is-selected {
    border-color: var(--ink);
    box-shadow: inset 4px 0 0 var(--lime);
    background: var(--surface, #fff);
}

.assistant-badge {
    flex: none;
    border-radius: 999px;
    padding: 3px 9px;
    background: var(--line);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* The two writing surfaces: a short description to work from, and the notes
   the assistant actually answers with. The second is the one people live in,
   so it is given room rather than a scrollbar. */
.knowledge-draft textarea,
.knowledge-editor textarea {
    width: 100%;
    font-size: 0.92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    resize: vertical;
}

.knowledge-editor {
    margin-top: 18px;
}

.knowledge-editor textarea {
    min-height: 260px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.86rem;
}

.deployment-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink);
    border-radius: 12px;
    background: var(--canvas);
}

.deployment-item > strong {
    font-size: 1rem;
}

/* Text runs full width; the buttons below it sit side by side. */
.deployment-item > strong,
.deployment-item > a,
.deployment-item > code,
.deployment-item > p,
.deployment-item > textarea {
    flex: 0 0 100%;
}

.deployment-target {
    color: var(--ink-2);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.deployment-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}
.deployment-pair-link { color: var(--ink); font-weight: 750; overflow-wrap: anywhere; }
.pairing-code { display: inline-block; margin-left: 4px; color: var(--ink); font-size: 1.2rem; letter-spacing: .12em; }

.deployment-snippet {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.74rem;
    resize: vertical;
}


.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* The row is one control made of three parts, so they share a height. */
.inline-form input,
.inline-form select,
.inline-form button {
    min-height: 44px;
}

.inline-form select {
    width: auto;
    min-width: 150px;
}

.inline-form input {
    flex: 1 1 140px;
    width: auto;
    min-width: 0;
}

.inline-form input[hidden] {
    display: none;
}

/* Three controls abreast leave the name field too narrow to read what was
   typed into it, so on a phone each one takes the full width. */
@media (max-width: 640px) {
    .inline-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .inline-form select,
    .inline-form input {
        width: 100%;
    }
}

/* Every tab's contents sit on a card, so the eye has an edge to read the
   section against instead of figures and tables floating on the page. */
.panel-section {
    --table-backdrop: var(--surface);
    padding: clamp(16px, 2.5vw, 26px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* Except the assistants tab, whose two columns are cards already. */
.panel-section:has(> .panel-columns) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.panel-section h2 {
    margin-top: 0;
    font-size: 1.3rem;
}

/* A heading inside a card, under the card's own title. */
.panel-section h3 {
    margin: 26px 0 12px;
    font-size: 1rem;
}

/* A listing reads as a table when its edge is drawn, its header is anchored
   to the body by a rule of its own, and alternate rows are tinted. Without
   those three it is a column of floating text. */
/* Separate rather than collapsed borders: a collapsed table discards the
   border on the table element itself, so the card edge that makes the
   listing read as a table would never be drawn. */
.session-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.session-table th,
.session-table td {
    padding: 12px 14px;
    font-size: 0.88rem;
    text-align: left;
}

.session-table thead th {
    border-bottom: 2px solid var(--line);
    color: var(--ink);
    background: var(--canvas);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.session-table tbody tr + tr td {
    border-top: 1px solid var(--line);
}

.session-table tbody tr:nth-child(even) {
    background: var(--canvas);
}

.session-table tbody tr:hover {
    background: var(--lime-2);
}

/* The "nothing here yet" line is a message, not a record. */
.session-table tbody tr:only-child td[colspan] {
    padding: 28px 16px;
    color: var(--muted);
    text-align: center;
}

/* A strip of labelled figures, each pair boxed so the row wraps instead of
   running off the side -- a headline number behind a horizontal scrollbar is
   a number nobody reads. The cards also stop a figure from reading as the
   caption of the one beside it. */
.usage-grid {
    display: grid;
    /* auto-fill, not auto-fit: a section reporting two figures should show two
       cards, not two cards stretched across the whole width. */
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 10px;
    margin: 0;
}

.usage-grid > div {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--canvas);
}

.usage-grid dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.usage-grid dd {
    margin: 6px 0 0;
    font-size: 1.3rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* One card per row would make five figures a page of scrolling, so a phone
   gets two abreast at a size that still reads. */
@media (max-width: 640px) {
    .usage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .usage-grid > div {
        padding: 12px;
    }

    .usage-grid dd {
        font-size: 1.15rem;
    }
}

.panel-body > .panel-section + .panel-section {
    margin-top: 16px;
}

.bundle-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.bundle-item {
    display: grid;
    gap: 6px;
    justify-items: start;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--canvas);
}

/* The button is the point of the card, so it spans it rather than sitting in
   a corner of the whitespace. */
.bundle-item button {
    justify-self: stretch;
}

.bundle-price {
    font-size: 1.6rem;
    font-weight: 850;
}

.bundle-detail {
    color: var(--muted);
    font-size: 0.82rem;
}

.bundle-item > button {
    margin-top: 10px;
}

.bundle-empty {
    color: var(--muted);
    font-size: 0.86rem;
}

/* The whole row is the hit area, because the checkbox alone is far too small
   a target on the tablets this product is bought for. */
.topup-opt-in {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--canvas);
    cursor: pointer;
}

.topup-opt-in input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex: none;
}

.topup-opt-in strong {
    display: block;
}

.topup-opt-in small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Sits inside the sentence rather than below it, so the rule reads as one
   line of English instead of three stacked fragments. */
.topup-opt-in select {
    width: auto;
    min-width: 0;
    margin: 0 2px;
    padding: 2px 6px;
    font-size: 0.82rem;
}

.topup-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.topup-settings label {
    color: var(--muted);
    font-size: 0.86rem;
}

/* Reads as one sentence across the row. Without this the fields inherit the
   full-width form styling and each lands on a line of its own. */
.topup-settings select {
    width: auto;
    min-width: 0;
    margin: 0;
}

/* Cloud panel */

.code-sample {
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    white-space: pre;
}

.api-key-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
    /* A long key must not push the panel wide on a narrow screen. */
    overflow-wrap: anywhere;
    margin: 8px 0;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.checkbox-row input {
    width: auto;
    margin: 0;
}

.playground-result {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.playground-result video {
    width: min(420px, 100%);
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #000;
    margin-top: 12px;
}

/* What a row of the request log offers for its video. Laid out as a row so a
   narrow column wraps the actions rather than stretching the table. */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
}

/* An action that is not navigation: playing happens on this page, so it
   cannot be a link, but it reads as one next to Download and Share. */
.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Playing a video from the log happens below the table rather than in a
   dialog: the row that was clicked stays visible, which is what tells the
   reader which of them they are watching. */
.log-player {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.log-player video {
    width: min(320px, 100%);
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #000;
}

.log-player-detail {
    flex: 1 1 240px;
    min-width: 0;
}

.log-player-text {
    margin: 0 0 6px;
    font-weight: 650;
}

@media (max-width: 980px) {
    .panel-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Wide tables scroll inside their card instead of stretching the page. The
   shadow on the right edge is how a phone reader learns there are more
   columns; it fades out once the table is scrolled to the end.

   The two cover layers hide the shadow at whichever end is fully scrolled, so
   they have to be the colour behind the table. Most tables here sit straight
   on the page, where the white cover this started out with showed up as a
   pale stripe down each edge. Anything that paints a card behind a table
   overrides --table-backdrop alongside its own background, so the two cannot
   drift apart. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--table-backdrop, var(--canvas, #f6f6f2)) 30%, transparent) left center / 24px 100% no-repeat,
        linear-gradient(to left, var(--table-backdrop, var(--canvas, #f6f6f2)) 30%, transparent) right center / 24px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(16, 16, 32, 0.16), transparent) left center / 12px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(16, 16, 32, 0.16), transparent) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.table-scroll .session-table {
    min-width: 440px;
}

/* Buttons at their natural width, side by side, wrapping when narrow. */
.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}