/* The panel pages' frame, page changes, interface frames, Superagent and Archiwum (linked after
   wiki.css in index.html, before workspace.css). */

/* Panel pages (Aplikacje AI, Twoje konto, administration): the old product's page frame
   (experience.css .page-heading, .section-card; admin.css widths), entering as its views did. */
/* Every page frame fills the page area beside the sidebar, with Firma's margins for the page
   area's width (ADR 0039): Firma's page reads them from its frame, as wide as the page area, so
   a page, its placeholder and an interface line up at every width. */
main.page { container: page / inline-size; }
.content, .workspace-content, .wk { width: 100%; padding: 35px 42px 45px; }
@container page (min-width: 1500px) { .content, .workspace-content, .wk { padding: 45px 55px; } }
@container page (max-width: 1200px) { .content, .workspace-content, .wk { padding: 32px 28px 40px; } }
@container page (max-width: 760px) { .content, .workspace-content, .wk { padding: 26px 22px 36px; } }
/* On a phone a card or a table wider than the page (many columns) scrolls in itself, never the
   page. */
@container page (max-width: 760px) { .section-card, .table-scroll { overflow-x: auto; } }
.content { animation: q-reveal 190ms var(--ease); }
/* Forms keep a width a person can read and fill, as prose keeps its measure. */
.content .form, .content .field { max-width: 720px; }
.content .page-title { font: 400 clamp(38px, 3.8vw, 54px)/1.05 var(--serif); letter-spacing: -1.2px; margin: 0; color: var(--ink); }
.content .page-lead, .content .ai-lead { font: 400 14px/1.7 var(--sans); color: #64695b; margin: 12px 0 28px; max-width: 70ch; }
.content > .page-title + :not(.page-lead):not(.ai-lead) { margin-top: 28px; }
.content .section-card { border: 1px solid var(--line); border-radius: 8px; padding: 20px; background: var(--raised); margin-bottom: 24px; }
.content .section-card h2 { font: 400 27px var(--serif); letter-spacing: -.3px; margin-bottom: 17px; }
.content .q-placeholder, .content .q-error { margin-bottom: 24px; }
@media (max-width: 760px) { .content .page-title { font-size: 38px; letter-spacing: -.8px; } }
@media (prefers-reduced-motion: reduce) { .content { animation: none; } }
/* A section of Administracja with tabs (section.js, ADR 0066): the section's frame is the page's;
   the tab's own frame inside it adds no margin and no second entrance, and may fill the height. */
.content.section { display: flex; flex-direction: column; min-height: 100%; }
.content.section > .section-tabs { margin: 22px 0 26px; flex-shrink: 0; }
.section-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.section-body > .content { padding: 0; animation: none; flex: 1; }
/* Twoje konto's cards side by side as the width allows. */
.content .account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 24px; align-items: start; margin-bottom: 24px; }
.content .account-cards > .section-card { margin: 0; }
/* A form's buttons stand under its fields (forms keep 720 px, above). */
.content .form-actions { max-width: 720px; }
.content .section-card > select { min-width: 180px; background: var(--surface); border: 1px solid #cbcdbd; border-radius: 6px; padding: 9px 11px; font-size: 13px; color: var(--ink); }
.content .settings-identity { display: flex; align-items: center; gap: 12px; margin: 22px 0 24px; }
.content .settings-identity .avatar { width: 40px; height: 40px; font-size: 14px; }
.content .settings-identity strong { display: block; font-size: 15px; font-weight: 550; }
.content .settings-identity small { font-size: 12.3px; color: #64695b; }
.wk-drawer-dialog .dialog-header .eyebrow { font: 600 11px/1.55 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #64695b; margin-bottom: 4px; }

/* ---- Page changes (ADR 0034): the page being left stays over the next one until that one has
   drawn, then fades out; it takes no clicks. ---- */
main.page { scrollbar-gutter: stable; }
/* Above the shell's own `.workspace .page` (position: relative, its reveal animation). */
.workspace main.page.page-leaving, main.page.page-leaving { position: fixed; z-index: 20; margin: 0; overflow: hidden; background: var(--paper); pointer-events: none; animation: none; transition: opacity 160ms ease; }
.workspace main.page.page-leaving.page-gone, main.page.page-leaving.page-gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .workspace main.page.page-leaving, main.page.page-leaving { transition: none; } }
/* The next page is on its way (its script or first read is slow): a thin line at the top. */
body.route-busy::before { content: ""; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--olive), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: route-busy 1.1s ease-in-out infinite; }
@keyframes route-busy { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { body.route-busy::before { animation: none; background: var(--olive); opacity: .5; } }

/* ---- Controls that move as little as they can (ADR 0034) ---- */
.q-busy { position: relative; }
.q-busy-keep { display: inline-flex; align-items: center; gap: inherit; visibility: hidden; }
.q-busy-spin { position: absolute; inset: 0; display: grid; place-items: center; }
.toast { animation: q-toast-in 240ms var(--ease) both; }
.toast.toast-leaving { animation: q-toast-out 200ms ease both; }
@keyframes q-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes q-toast-out { to { opacity: 0; transform: translateY(6px); } }
dialog.wk-drawer-dialog.closing { animation: q-slide-out 220ms var(--ease) both; }
dialog.wk-drawer-dialog.closing::backdrop { opacity: 0; transition: opacity 220ms ease; }
@keyframes q-slide-out { to { opacity: 0; transform: translateX(35px); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.toast-leaving, dialog.wk-drawer-dialog, dialog.wk-drawer-dialog.closing { animation: none; } }

/* ---- Interface frames (ADR 0034): a frame shows once its page has loaded, over the one it
   replaces, which stays until then. ---- */
.q-frames, .interface-box { position: relative; }
.q-frames > .interface-frame, .interface-box > .interface-box { position: absolute; inset: 0; }
.interface-frame { transition: opacity 200ms ease; }
.interface-frame.loading { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .interface-frame { transition: none; } }

/* What an agent (or another person) just changed on a page flashes softly (ADR 0053). */
.q-changed { animation: q-changed 1800ms ease-out; border-radius: 6px; }
@keyframes q-changed { 0%, 25% { background-color: color-mix(in srgb, var(--sage) 85%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 85%, transparent); } 100% { background-color: transparent; box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .q-changed { animation: none; outline: 2px solid var(--sage); outline-offset: 2px; } }

/* ---- Superagent (ADR 0059, 0065) ---- */
/* The agent's page (ADR 0065): its conversation as a Claude session in light mode, its state one
   line, the work going and the log in a slim side panel (a drawer below 1100 px). */
/* Quartio's Praca w tle tab (ADR 0066): the section is as tall as the page area, its tabs on top,
   the conversation in the rest, scrolling on its own with the composer at the bottom. */
.content.section:has(> .section-body > .sa-page) { height: 100%; padding-bottom: 0; }
.content.section:has(> .section-body > .sa-page) > .section-tabs { margin-bottom: 0; }
.sa-page { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.section-body > .sa-page { flex: 1; height: auto; }
.sa-head { flex: none; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; }
.sa-state-wrap { position: relative; min-width: 0; margin-left: -11px; }
.sa-state { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 30px; padding: 4px 11px; border-radius: 999px; color: var(--muted); font-size: 12.5px; }
.sa-state:hover, .sa-state[aria-expanded="true"] { background: var(--sidebar); color: var(--ink); }
.sa-state-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5d8657; }
.sa-state[data-state="busy"] .sa-dot { background: var(--olive); animation: run-card-pulse 1.6s ease-in-out infinite; }
.sa-state[data-state="warn"] .sa-dot { background: #a5803a; }
.sa-state[data-state="alert"] { color: var(--danger); }
.sa-state[data-state="alert"] .sa-dot { background: var(--danger); }
.sa-state[data-state="off"] .sa-dot { background: #a9ab9e; }
/* Small and calm (ADR 0072): a summary, the few failures that need someone, the rest on request; it scrolls inside. */
.sa-state-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(400px, calc(100vw - 32px)); max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px #292b2722; font-size: 13px; animation: q-pop 160ms var(--ease) both; }
.sa-state-panel[hidden] { display: none; }
.sa-state-panel summary { cursor: pointer; color: var(--ink); }
.sa-alerts, .sa-failures { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-alerts li { padding: 7px 10px; border-radius: 7px; background: var(--sand); }
.sa-alerts li[data-level="error"] { background: var(--danger-bg); color: var(--danger); }
.sa-summary { margin: 0; color: var(--ink); }
.sa-state-panel p { margin: 0; }
.sa-failures { gap: 10px; font-size: 12.5px; }
.sa-failure { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 2px solid #a5803a; }
.sa-failure[data-recovered="true"] { border-left-color: var(--line); color: var(--muted); }
.sa-failure-what { color: var(--ink); overflow-wrap: anywhere; }
.sa-failure[data-recovered="true"] .sa-failure-what { color: var(--muted); }
.sa-failure .sa-link { align-self: flex-start; }
.sa-all { align-self: flex-start; }
.sa-table { margin-top: 6px; border-collapse: collapse; font-size: 12.5px; }
.sa-table td { padding: 2px 12px 2px 0; }
.sa-grow { flex: 1; }
.sa-side-button { flex: none; }
.sa-count-badge { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--olive); color: var(--surface); font-size: 11px; line-height: 18px; text-align: center; }
.sa-count-badge[hidden] { display: none; }
.sa-body { flex: 1; min-height: 0; display: flex; position: relative; overflow: clip; }
.sa-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.sa-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #c9cdbd transparent; }
.sa-scroll:focus { outline: none; }
.sa-col { max-width: 808px; margin: 0 auto; padding: 28px 24px 12px; }
.sa-composer { flex: none; width: 100%; max-width: 808px; margin: 0 auto; padding: 6px 24px 20px; }
.sa-composer[hidden] { display: none; }
.sa-page .sa-composer .composer { grid-template-columns: minmax(0, 1fr) 32px; min-height: 0; padding: 14px 14px 10px 17px; }
.sa-page .sa-composer .composer textarea { min-height: 28px; max-height: 180px; }
.sa-page .sa-composer .send-button { grid-column: 2; }
.sa-empty { padding: 48px 0; text-align: center; }
.sa-notice[hidden] { display: none; }
.sa-notice .q-error { margin: 24px 0; }
.sa-entries { list-style: none; margin: 0; padding: 0; }
.sa-entry + .sa-entry { margin-top: 16px; }
:is(.sa-entry--steps, .sa-entry--event) + :is(.sa-entry--steps, .sa-entry--event) { margin-top: 6px; }
.sa-queued:not(:empty) { margin-top: 16px; }
.sa-new { animation: q-arrive 220ms var(--ease) both; }
.sa-prompt { padding: 10px 14px 11px; border-radius: 8px; background: var(--sidebar); }
.sa-entry--queued .sa-prompt { border: 1px dashed #c3c5b6; }
.sa-prompt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 3px; font-size: 12px; color: var(--muted); }
.sa-who { font-weight: 600; color: var(--ink); }
.sa-prompt-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; color: var(--ink); }
.sa-prompt .sa-words { font-size: 14.5px; }
.sa-tag { padding: 0 7px; border-radius: 999px; background: var(--sand); color: var(--ink); font-size: 11px; }
.sa-said { display: grid; grid-template-columns: 20px minmax(0, 1fr); }
.sa-words { font-size: 15px; line-height: 1.75; }
.sa-said .sa-words { color: #4d5640; }
.sa-words.sa-quiet { font-size: 14px; line-height: 1.65; color: #4f5446; }
.sa-mark { position: relative; flex: none; width: 20px; height: 1.6em; color: #a9ab9e; }
.sa-said .sa-mark { height: 1.75em; font-size: 15px; }
.sa-mark::before { content: ''; position: absolute; left: 3px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sa-mark--say { color: var(--ink); }
.sa-mark--ok { color: #5d8657; }
.sa-mark--failed { color: var(--danger); }
.sa-mark--going { color: var(--olive); }
.sa-mark--going::before { animation: run-card-pulse 1.4s ease-in-out infinite; }
.sa-mark--event::before { background: none; border: 1.5px solid currentColor; }
.sa-steps { display: flex; flex-direction: column; gap: 1px; }
.sa-fold { font-size: 13.5px; line-height: 1.6; color: #4f5446; }
.sa-line { display: flex; align-items: flex-start; min-width: 0; }
.sa-line-text { min-width: 0; overflow-wrap: anywhere; }
.sa-fold > summary { display: block; margin: 0 -6px; padding: 1px 6px; border-radius: 6px; cursor: pointer; list-style: none; }
.sa-fold > summary::-webkit-details-marker { display: none; }
.sa-fold > summary:hover { background: #e5e4da; }
.sa-fold > summary .sa-line-text::after { content: '›'; display: inline-block; margin-left: 7px; color: var(--muted); transition: transform .18s var(--ease); }
.sa-fold[open] > summary .sa-line-text::after { transform: rotate(90deg); }
.sa-fold--flat { padding: 1px 0; }
.sa-fold-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 6px 9px; padding: 2px 0 2px 19px; border-left: 1px solid var(--line); }
.sa-detail, .sa-count { color: var(--muted); }
.sa-step-more { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.sa-link { padding: 0; color: var(--olive); font-weight: 550; }
.sa-link:hover { text-decoration: underline; text-underline-offset: .16em; }
.sa-event { display: flex; align-items: flex-start; gap: 12px; }
.sa-event > .sa-fold { flex: 1; min-width: 0; }
.sa-when { flex: none; font-size: 11.5px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.sa-event > .sa-when { padding-top: 3px; }
.sa-working { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--olive); font-size: 13.5px; }
.sa-earlier { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 0 18px; color: var(--muted); font-size: 12.5px; }
.sa-earlier[hidden], .sa-working[hidden], .sa-back[hidden] { display: none; }
.sa-spinner { width: 13px; height: 13px; border-width: 1.5px; }
.sa-back { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sa-back-title { font: 400 19px/1.3 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.sa-side { display: none; flex: none; width: 320px; overflow-y: auto; padding: 14px 20px 28px; border-left: 1px solid var(--line); scrollbar-width: thin; }
.sa-side-open .sa-side { display: block; }
.sa-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sa-side-head h2 { font: 400 20px/1.3 var(--serif); }
.sa-shade { display: none; }
.sa-section { padding: 14px 0; border-top: 1px solid var(--line); }
.sa-section h3 { margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sa-prefs > summary { cursor: pointer; list-style: none; }
.sa-prefs > summary::-webkit-details-marker { display: none; }
.sa-prefs > summary h3 { display: inline; }
.sa-prefs .sa-words { margin-top: 10px; font-size: 13px; line-height: 1.6; }
.sa-rows, .sa-log, .sa-crons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sa-rows { gap: 2px; margin: 0 -10px; }
.sa-rows li { padding-left: calc(var(--depth, 0) * 14px); }
.sa-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; width: 100%; padding: 7px 10px; border-radius: 8px; text-align: left; }
.sa-row:hover { background: var(--sidebar); }
.sa-row-title { font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sa-row-when { grid-row: 1; grid-column: 2; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sa-row-line { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.sa-log-group + .sa-log-group { margin-top: 14px; }
.sa-log-title, .sa-log-group > summary { margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sa-log-group > summary { cursor: pointer; }
.sa-log { gap: 10px; }
.sa-log li { padding-left: 11px; border-left: 2px solid var(--line); }
.sa-log li[data-status="working"] { border-left-color: var(--olive); }
.sa-log li[data-status="open"] { border-left-color: #b7b29c; }
.sa-log-item { font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.sa-log-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; cursor: pointer; }
.sa-log-note.open { display: block; }
.sa-log-when { margin-top: 2px; font-size: 11px; color: var(--muted); }
:is(.sa-log-item, .sa-log-note, .sa-cron-text) :is(p, ul, ol) { margin: 0; }
:is(.sa-log-item, .sa-log-note, .sa-cron-text) code { font: .9em ui-monospace, monospace; }
.sa-crons { gap: 10px; }
.sa-cron-when { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sa-cron-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 1099px) {
  .sa-side { display: block; position: absolute; z-index: 25; top: 0; right: 0; bottom: 0; width: min(360px, calc(100% - 32px)); background: var(--surface); box-shadow: -12px 0 30px #292b271f; transform: translateX(100%); visibility: hidden; transition: transform .22s var(--ease), visibility 0s .22s; }
  .sa-side-open .sa-side { transform: none; visibility: visible; transition: transform .22s var(--ease); }
  .sa-side-open .sa-shade { display: block; position: absolute; z-index: 24; inset: 0; background: #292b2726; animation: q-appear 160ms ease both; }
}
@media (max-width: 640px) {
  .sa-head { position: relative; gap: 8px; min-height: 44px; padding: 6px 0; }
  .sa-state-wrap { position: static; }
  .sa-state-panel { top: calc(100% - 2px); left: 0; right: 0; width: auto; }
  .sa-side-button > span:not(.sa-count-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sa-side-button { padding: 8px 10px; }
  .sa-col { padding: 14px 6px 10px; }
  .sa-composer { padding: 4px 0 12px; }
  .sa-words, .sa-prompt-text { font-size: 14.5px; }
  .sa-event { flex-wrap: wrap; gap: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .sa-new, .sa-state-panel { animation: none; } .sa-side { transition: none; } .sa-state[data-state="busy"] .sa-dot, .sa-mark--going::before { animation: none; } }

/* Archiwum (ADR 0071): what was archived, back with one click; deleting for good asks for the
   name typed in. One column of rows; at phone width the actions go under the name. */
.archive-lead { max-width: 640px; margin: -6px 0 22px; }
/* The heading takes the focus after a row goes (a place to continue from), not a control. */
.archive-page h1:focus { outline: none; }
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line); }
.archive-row:first-child { border-top: 0; padding-top: 4px; }
.archive-what { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 260px; }
.archive-what .icon { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--muted); }
.archive-title { font: 550 14px/1.4 var(--sans); overflow-wrap: anywhere; }
.archive-when { font-size: 12px; margin-top: 2px; }
.archive-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.archive-confirm { flex: 1 1 100%; display: grid; gap: 10px; padding: 14px; border: 1px solid #e0c4ba; border-radius: 7px; background: var(--danger-bg); }
.archive-confirm p { max-width: 640px; }
.archive-confirm .field { max-width: 420px; color: var(--ink); }
.archive-confirm code { font-size: 11.5px; }
.archive-empty { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.archive-empty .icon { width: 22px; height: 22px; }
.cn-archive-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #60694f; font-size: 13px; }
.cn-archive-link:hover { color: var(--ink); }
.cn-archive-link .icon { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .archive-row .actions { width: 100%; }
  .archive-row .actions .btn { flex: 1 1 auto; min-height: 40px; }
}