/* Settings page only (D3-08/D3-20): a secret shown once sits inside its own row with a
   Copy button, tinted for as long as it is on screen so the eye lands on it. L3-5: it arrives
   with a 240 ms opacity fade on the motion token (DESIGN.md: transform/opacity, nothing over
   250 ms on a control); it used to be a five-second background glow. */
.font-row.is-fresh { flex-wrap: wrap; border-radius: 8px; padding-inline: 8px; background: var(--color-tint); box-shadow: 0 0 0 3px var(--color-tint); animation: qk-fresh var(--studio-dur-move, 240ms) var(--studio-ease-out, ease-out) both; }
.font-row code { font-size: 12px; overflow-wrap: anywhere; direction: ltr; }
.font-row.is-fresh .hint { margin-inline-start: auto; }
.font-row.is-fresh .qk-btn:not(.qk-btn--danger) { margin-inline-start: 0; }
@keyframes qk-fresh { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .font-row.is-fresh { animation: none; } }

/* D6-11: pending invites under the invite link, one row each with its revoke. Existing tokens only. */
.invites-list{display:grid;gap:8px;margin-top:var(--space-4)}
.invites-list h3{font-size:14px;margin:4px 0 0}
.invite-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:var(--space-3) var(--space-3);border:1px solid var(--color-border);border-radius:10px;font-size:13px}
.invite-row span{min-width:0;overflow-wrap:anywhere}
.invite-row .qk-btn{min-height:44px}
/* D9-04: the verify-first note and its resend button sit apart from the link button above and the email field below. */
#verify-invite{margin-block:12px}
#verify-invite .hint{margin:0 0 8px}


/* UX 5.2: the font picker speaks the page's language. The native input stays (focus, validation,
   keyboard) but sits invisibly over our own button and file-name line. */
.file-pick{position:relative;justify-items:start}
.file-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-pick:focus-within .file-pick-btn{outline:2px solid var(--studio-accent);outline-offset:3px}
.file-pick-name{margin:0;unicode-bidi:plaintext}
/* Fields on this page stand alone, so their edge has to be findable at rest (WCAG 1.4.11, 3:1):
   fg-3 is the token the layer uses for that (search header, shell.css), 6.2:1 on the panel. */
#settings-main :is(.qk-field, select, input:not([type=checkbox]):not([type=radio]):not([type=file])){border:1px solid var(--studio-fg-3)}
/* Loop 12, round 10: Profile, Workspace and Plan lost the sentence that repeated their title; the content keeps a 12px step under it. */
.settings-section>h2+:not(.hint){margin-top:12px}

/* ==========================================================================
   Settings Direction B «اللوحة», The Board (13 Oct 2026, research/design-directions/settings).
   A board of live states on top: the plan as the lime 9:16 card (minutes left as the big Lalezar figure, the
   same card as upload, export and sign-in) and one tile per section that jumps to it. Every section stays open
   below: the people section as the hero, the rest in two columns, delete last on its own quiet dashed card.
   One lime surface on the screen (the plan card); every other action is the plain or quiet pill.
   ========================================================================== */
#settings-main{max-width:1200px}
.set-title{margin:0 0 var(--space-5);font:var(--studio-display-weight,400) 56px/1.2 var(--studio-display-font);letter-spacing:0}
@media(prefers-reduced-motion:no-preference){.set-title{animation:set-land var(--studio-dur-move,240ms) var(--studio-ease-out,ease-out) both}}
@keyframes set-land{from{opacity:0;transform:translateY(.3em)}}

.set-board{display:grid;grid-template-columns:200px repeat(4,minmax(0,1fr));grid-auto-rows:minmax(160px,auto);gap:var(--space-4);margin-bottom:var(--space-6)}
.set-board a{text-decoration:none;min-width:0}
.set-board .set-tile{color:var(--studio-fg)}
.set-board .qk-icon{flex:none}
.set-tile{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border-radius:var(--studio-radius-tile,18px);background:var(--studio-panel);transition:background-color var(--studio-dur-state,160ms) var(--studio-ease-out,ease)}
.set-tile:hover{background:var(--studio-raise)}
.set-tile--team{grid-column:span 2}
.set-fn{display:flex;align-items:center;gap:var(--space-2);font-size:13px;font-weight:600;color:var(--studio-fg-2)}
.set-v{display:block;margin-top:auto;font:var(--studio-display-weight,400) 32px/1.25 var(--studio-display-font);color:var(--studio-fg);overflow-wrap:anywhere}
.set-tile small{font-size:12px;line-height:1.5;color:var(--studio-fg-3);overflow-wrap:anywhere}
.set-marks{display:flex;gap:var(--space-2)}.set-marks .partner-mark{block-size:20px;margin:0}
.set-tile--danger{background:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--studio-danger) 55%,transparent)}
.set-tile--danger:hover{background:color-mix(in srgb,var(--studio-danger) 8%,transparent)}
.set-tile--danger .set-fn{color:var(--studio-danger)}
.set-tile--danger small{margin-top:auto}
.set-board .set-plan{grid-row:span 2;display:flex;flex-direction:column;padding:var(--space-4);border-radius:var(--studio-radius-tile,18px);background:var(--studio-accent);color:var(--studio-accent-ink);transition:background-color var(--studio-dur-state,160ms) var(--studio-ease-out,ease),transform var(--studio-dur-press,90ms) var(--studio-ease-out,ease)}
.set-board .set-plan:hover{background:var(--lime-400)}
.set-plan:active{transform:scale(.99)}
.set-plan .set-fn{color:inherit}
.set-mins{font-variant-numeric:tabular-nums;display:block;margin-top:auto;font:var(--studio-display-weight,400) 96px/1.05 var(--studio-display-font);min-height:1.05em}
.set-ml{font-size:13px;font-weight:600}
.set-go{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:44px;margin-top:var(--space-4);padding-inline:var(--space-4) var(--space-3);border-radius:var(--studio-radius-pill,999px);background:var(--studio-accent-ink);color:var(--studio-accent);font-size:13px;font-weight:700}
.set-board a:focus-visible{outline:3px solid var(--studio-fg);outline-offset:3px}
/* a tile whose section is not there for this account hides with it (privacy and developers are owner-only, fonts and
   publishing need their routes on this server) */
#settings-main:has(#train-section[hidden]) .set-board a[href="#train-section"],
#settings-main:has(#fonts-section[hidden]) .set-board a[href="#fonts-section"],
#settings-main:has(#notify-section[hidden]):has(#publish-section[hidden]) .set-board a[href="#notify-section"],
#settings-main:has(#api-keys-section[hidden]) .set-board a[href="#developer"]{display:none}

/* every section a panel card; the people section is the hero, its members beside the owner's invite tools */
#settings-main .settings-section{background:var(--studio-panel);border:0;border-radius:var(--studio-radius-tile,18px);padding:var(--space-5);margin:0 0 var(--space-4);scroll-margin-top:var(--space-4)}
#settings-main .settings-section>h2{text-wrap:balance;margin:0 0 var(--space-2);font:var(--studio-display-weight,400) 28px/1.3 var(--studio-display-font);letter-spacing:0}
#settings-main .settings-section>h2 .hint{font:400 12px/1.5 var(--studio-font,inherit);margin:0}
#settings-main .settings-section h3{font-size:14px;margin:var(--space-4) 0 var(--space-2)}
#settings-main .set-hero>h2{font-size:40px}
.set-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-4) var(--space-6);align-items:start}
.set-hero-grid #join-form{margin-top:var(--space-4)}
#owner-tools{display:grid;gap:var(--space-3);justify-items:start}
#owner-tools[hidden]{display:none}
#owner-tools>*{margin:0}
.set-cols{columns:2 400px;column-gap:var(--space-4)}
.set-cols>.settings-section{break-inside:avoid}
.set-check{display:flex;align-items:flex-start;gap:var(--space-3);font-size:14px}
.set-check input{margin-top:var(--space-1);flex:none}
#settings-main .set-danger{background:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--studio-danger) 55%,transparent)}
#settings-main .set-danger>h2{color:var(--studio-danger)}

@media(max-width:1100px){
 .set-board{grid-template-columns:180px repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
 .set-title{font-size:40px;margin-bottom:var(--space-4)}
 .set-board{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(132px,auto);gap:var(--space-3);margin-bottom:var(--space-5)}
 .set-tile{padding:var(--space-3)}
 .set-tile--team{grid-column:span 1}
 .set-tile--danger{grid-column:span 2;min-height:0}
 .set-board .set-plan{padding:var(--space-3)}
 .set-v{font-size:28px}
 .set-mins{font-size:72px}
 .set-go{padding-inline:var(--space-3) var(--space-2);font-size:12px}
 #settings-main .settings-section{padding:var(--space-4)}
 #settings-main .settings-section>h2{font-size:24px}
 #settings-main .set-hero>h2{font-size:32px}
 .set-hero-grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.set-board :is(.set-plan,.set-tile){transition:none}.set-plan:active{transform:none}}
/* ========================== end Settings Direction B ========================== */