/* ==========================================================================
   SIX SCREENS (v669) — see modules/six.js
   Only applies with html.six (?six=1). Uses the app's own tokens: one green,
   one blue, --r-md, 19/17/15/11 type. The six screen colours are new and
   live here, muted, each with a darker shade for white text on it.
   ========================================================================== */
:root {
    --six-badge: #B08A2E;  --six-badge-d: #85661A;
    --six-card:  #4E9A76;  --six-card-d:  #2F7A57;
    --six-look:  #3F72A0;  --six-look-d:  #2C5D8A;
    --six-inout: #C0694E;  --six-inout-d: #A04E35;
    --six-chat:  #7A63A6;  --six-chat-d:  #5F4B8B;
    --six-apps:  #A95A7E;  --six-apps-d:  #8B4064;
}
[data-theme="dark"] {
    --six-badge: #D2AA4E; --six-card: #5DBB8F; --six-look: #6E9FCC;
    --six-inout: #DB8A6E; --six-chat: #A08BCB; --six-apps: #CF84A6;
}

/* ── What the six screens replace ─────────────────────────────────────── */
html.six #looksTopbar,
html.six #looksSheet,
html.six .dropdown-menu,
html.six .dropdown-overlay { display: none !important; }

/* ── The frame ────────────────────────────────────────────────────────── */
.six-shell {
    --c: var(--six-badge);
    --cd: var(--six-badge-d);
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--text-primary);
    font-family: var(--font-family);
}
.six-shell[data-screen="card"]  { --c: var(--six-card);  --cd: var(--six-card-d); }
.six-shell[data-screen="look"]  { --c: var(--six-look);  --cd: var(--six-look-d); }
.six-shell[data-screen="inout"] { --c: var(--six-inout); --cd: var(--six-inout-d); }
.six-shell[data-screen="chat"]  { --c: var(--six-chat);  --cd: var(--six-chat-d); }
.six-shell[data-screen="apps"]  { --c: var(--six-apps);  --cd: var(--six-apps-d); }

/* The thin bar: six segments, the one you are on lit in its colour. */
.six-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--space-lg) 0;
    background: color-mix(in srgb, var(--c) 10%, var(--card));
    transition: background var(--slow) var(--ease);
}
.six-seg {
    position: relative;
    height: 16px;
    padding: 6px 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.six-seg i { display: block; height: 4px; border-radius: var(--r-pill); background: var(--line); transition: background var(--slow) var(--ease); }
.six-seg[aria-current="true"] i { background: var(--c); }
.six-seg[data-screen="badge"] { --seg: var(--six-badge); }
.six-seg[data-screen="card"]  { --seg: var(--six-card); }
.six-seg[data-screen="look"]  { --seg: var(--six-look); }
.six-seg[data-screen="inout"] { --seg: var(--six-inout); }
.six-seg[data-screen="chat"]  { --seg: var(--six-chat); }
.six-seg[data-screen="apps"]  { --seg: var(--six-apps); }
/* Something waiting on that screen: its count, over its segment. */
.six-seg b {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--seg);
    color: #fff;
    font-size: var(--type-note);
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}
.six-seg b[hidden] { display: none; }

/* The header: your badge on the left, where you are on the right. Pulled
   down, the panel under it. */
.six-head {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md) var(--space-lg);
    background: color-mix(in srgb, var(--c) 10%, var(--card));
    transition: background var(--slow) var(--ease);
    touch-action: none;
}
.six-head::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: var(--r-pill);
    background: var(--line);
}
/* The chips were drawn to sit over the camera; here they sit on the header. */
.six-head .looks-status,
.six-where {
    border-color: var(--line);
    background: var(--card);
    color: var(--text-primary);
}
.six-head .looks-status { height: 44px; max-width: none; flex: 0 1 auto; }
.six-where {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 44px;
    margin-left: auto;
    padding: 0 var(--space-md);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--type-body);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.six-where > svg { width: 20px; height: 20px; flex: none; }
.six-where .six-where-open { width: 16px; height: 16px; color: var(--text-secondary); }
/* The tag chip, inside it: no plate of its own, and only when there is a tag. */
.six-where .looks-tagchip { height: auto; padding: 0; margin: 0; border: 0; background: none; pointer-events: none; }
.six-where .looks-tagchip.is-tag::before { content: '+'; margin-right: 4px; color: var(--text-secondary); }
.six-where .looks-tagchip:not(.is-tag):not(.is-wrong) { display: none; }
/* No position, or a tag chosen without a name: it keeps its red. */
.six-where .looks-tagchip.is-wrong { padding: 4px 10px; border-radius: var(--r-pill); background: var(--fix-waiting, #B3402F); color: #fff; }

/* ── The screens, side by side ────────────────────────────────────────── */
.six-below { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.six-view { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.six-track { display: flex; height: 100%; transition: transform var(--slow) var(--ease); }
.six-screen {
    --c: var(--six-badge);
    --cd: var(--six-badge-d);
    --bg: color-mix(in srgb, var(--c) 9%, var(--ground));
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
}
.six-screen[data-screen="card"]  { --c: var(--six-card);  --cd: var(--six-card-d); }
.six-screen[data-screen="look"]  { --c: var(--six-look);  --cd: var(--six-look-d); overflow: hidden; }
.six-screen[data-screen="inout"] { --c: var(--six-inout); --cd: var(--six-inout-d); }
.six-screen[data-screen="chat"]  { --c: var(--six-chat);  --cd: var(--six-chat-d); }
.six-screen[data-screen="apps"]  { --c: var(--six-apps);  --cd: var(--six-apps-d); }

.six-pad {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-lg) calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
}
.six-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--type-title);
    font-weight: var(--font-weight-bold);
}
.six-title::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.six-lead {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: calc(-1 * var(--space-sm)) 0 0;
    font-size: var(--type-spot);
    line-height: 1.4;
    text-wrap: balance;
}
.six-lead small { font-size: var(--type-spot); color: var(--text-secondary); }
.six-screen[data-screen="badge"] .six-lead span { font-size: var(--type-title); font-weight: var(--font-weight-medium); }
.six-foot { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
.six-foot:empty { display: none; }
.six-foot h3 { margin: 0; font-size: var(--type-body); font-weight: var(--font-weight-medium); color: var(--text-secondary); }
.six-foot .notification-toggle-row,
.six-foot .profile-editor-blocked-section {
    min-height: 64px;
    padding: var(--space-md) var(--space-lg);
    border: 0;
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--lift-1);
    box-sizing: border-box;
}
.six-foot .notification-toggle-label { font-size: var(--type-spot); font-weight: var(--font-weight-medium); }

.six-btn {
    min-height: 52px;
    padding: 0 var(--space-xl);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--type-spot);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.six-btn-go { background: var(--cd); border-color: transparent; color: #fff; }
.six-btn-quiet { background: none; border-color: transparent; color: var(--text-secondary); }
.six-btn-small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--type-body); }

/* ── 1 Badge ──────────────────────────────────────────────────────────── */
.six-badge-body > .looks-dialog-title { display: none; }   /* the screen has its title */
.six-badge-body [data-act="close"] { display: none; }
.six-badge-body .bs-card-row { display: none; }             /* the card has a screen of its own */        /* "Not now": it is a page, not a question */
.six-badge-body .looks-btn-blue { background: var(--cd); }
.six-warn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--six-badge) 18%, var(--card));
    font-size: var(--type-body);
    line-height: 1.4;
}
.six-warn b { font-size: var(--type-spot); }
.six-warn[hidden] { display: none; }

/* ── 2 Card ───────────────────────────────────────────────────────────── */
/* The card editor, moved out of the square and laid out as the card itself:
   2:1, the picture on the left, the name and the words on the right. The
   fields are the same elements, so saving and the photo button are as before.
   It sized itself from the square (container units); here it sizes from the
   screen's width. */
.six-card-host .look-cardface {
    position: static;
    display: block;
    container-type: normal;
    overflow: visible;
    border-radius: 0;
    background: none;
    --text-primary: inherit;
    --text-secondary: inherit;
    --line: inherit;
    --input-bg: inherit;
    --bg-primary: inherit;
}
.six-card-host .look-cardface-inner { display: flex; gap: var(--space-sm); padding: 0; overflow: visible; align-items: stretch; }
.six-card-host .look-cardface-foot { display: none; }   /* the Google row: nobody signs in */
.six-card-host .look-cardedit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    width: 100%;
    aspect-ratio: 2 / 1;
    gap: 0;
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--lift-1);
}
.six-card-host .look-cardedit-photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: var(--r-md) 0 0 var(--r-md);
}
.six-card-host #lookCardName,
.six-card-host #lookCardTab {
    grid-column: 2;
    margin: var(--space-md) var(--space-md) 0 var(--space-lg);
    padding: 6px 10px;
    border: 1px dashed var(--line);
    background: var(--ground);
    color: var(--text-primary);
    text-align: left;
}
.six-card-host #lookCardName { grid-row: 1; font-size: var(--type-title); font-weight: var(--font-weight-bold); }
.six-card-host #lookCardTab {
    grid-row: 2;
    align-self: start;
    margin-bottom: var(--space-md);
    font-size: var(--type-spot);
    font-weight: var(--font-weight-normal);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.six-card-host .look-cardface-hint { margin: 0; font-size: var(--type-body); color: var(--text-secondary); text-align: left; }
.six-credits {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--lift-1);
}
.six-credits b { font-size: var(--type-title); color: var(--cd); font-variant-numeric: tabular-nums; }
.six-credits span { flex: 1; font-size: var(--type-body); line-height: 1.35; color: var(--text-secondary); }

/* ── 3 Look around ────────────────────────────────────────────────────── */
.six-look { display: flex; flex-direction: column; height: 100%; }
.six-cam { position: relative; flex: 0 0 var(--six-cam-h, 58%); min-height: 0; }
html.six #lookSquares.looks-sheet-layout {
    position: absolute;
    inset: 0;
    top: 0;
    height: 100%;
}
.six-cuts {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: calc(-1 * var(--space-md));
    padding: 0 var(--space-lg) var(--space-lg);
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--bg);
}
.six-handle {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: calc(100% + 2 * var(--space-lg));
    height: 30px;
    margin: 0 calc(-1 * var(--space-lg));
    padding: 0;
    border: 0;
    background: var(--bg);
    cursor: ns-resize;
    touch-action: none;
}
.six-handle i { width: 44px; height: 5px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 45%, transparent); }
.six-cuts-empty { margin: 0 0 var(--space-md); font-size: var(--type-body); color: var(--text-secondary); }
.six-found-host:has(.looks-found:not([hidden])) ~ .six-cuts-empty,
.six-cuts:has(.looks-found:not([hidden])) .six-cuts-empty { display: none; }
/* The badges found, in rows of three that grow downwards. */
.six-cuts .looks-found { margin: 0; }
.six-cuts .looks-found-line { display: block; }
.six-cuts .looks-found-shoot { display: none; }
.six-cuts .looks-found-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    overflow: visible;
    padding: var(--space-sm) 0;
}
.six-cuts .looks-found-card { width: 100%; height: auto; aspect-ratio: 1; }
.six-cuts .looks-found-face { width: 100%; height: 100%; border-radius: var(--r-md); }

/* ── 4 In / Out ───────────────────────────────────────────────────────── */
.six-help { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.six-help span {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--r-pill);
    background: var(--card);
    font-size: var(--type-body);
    font-weight: var(--font-weight-medium);
}
.six-private { margin: calc(-1 * var(--space-xs)) 0 0; font-size: var(--type-body); line-height: 1.4; color: var(--text-secondary); }
.six-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.six-empty { padding: var(--space-2xl) var(--space-sm); font-size: var(--type-spot); line-height: 1.45; text-align: center; color: var(--text-secondary); }
.six-row { position: relative; border-radius: var(--r-md); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.six-under {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--space-xl);
    border-radius: var(--r-md);
    font-size: var(--type-spot);
    font-weight: var(--font-weight-bold);
    color: #fff;
    opacity: 0;
}
.six-under.is-yes { background: var(--cd); }
.six-under.is-no { background: var(--text-secondary); justify-content: flex-end; }
.six-row[data-dir="yes"] .six-under.is-yes,
.six-row[data-dir="no"] .six-under.is-no { opacity: 1; }
.six-row-top {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 4px 0 2px;
    background: var(--bg);
    transition: transform var(--base) var(--ease);
}
.six-row.drag .six-row-top { transition: none; }
.six-row-acts { display: none; }
.six-row.open .six-row-acts { display: grid; }

/* The card: 2:1, picture left, words right. */
.six-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 2 / 1;
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--lift-1);
}
.six-card-pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-md) 0 0 var(--r-md);
    background: color-mix(in srgb, var(--six-card) 14%, var(--card));
}
.six-card-pic img.is-animal { object-fit: contain; padding: 10%; box-sizing: border-box; }
.six-card-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl); overflow: hidden; }
.six-card-txt b { font-size: var(--type-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.six-card-txt b.is-none { font-weight: var(--font-weight-normal); color: var(--text-secondary); }
.six-card-said {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: var(--type-spot);
    line-height: 1.3;
    color: var(--text-secondary);
}
.six-card-said[hidden] { display: none; }
.six-card-chat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 44px;
    margin-top: auto;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--cd);
    color: #fff;
    font-family: var(--font-family);
    font-size: var(--type-body);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.six-card-chat svg { width: 16px; height: 16px; }
/* Came from your badge: a gold edge, and the badge on the card's corner. */
.six-card.via-badge { box-shadow: 0 0 0 2px var(--badge-gold), var(--lift-1); }
.six-via { position: absolute; right: -8px; bottom: -8px; width: 34px; height: auto; pointer-events: none; }

/* ── 5 Chat ───────────────────────────────────────────────────────────── */
.six-chats .chatlist-scroll {
    overflow: visible;
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--lift-1);
}
.six-chats .chatlist-scroll:empty { display: none; }

/* ── 6 Apps ───────────────────────────────────────────────────────────── */
.six-apps .looks-apps-grid { grid-template-columns: 1fr 1fr; padding: 0; }
.six-apps .looks-app { aspect-ratio: 1; justify-content: center; background: var(--card); border-color: transparent; box-shadow: var(--lift-1); }
.six-apps .looks-app-name { font-size: var(--type-spot); }
.six-apps .looks-app-sub { font-size: var(--type-body); }
.six-apps .six-soon { background: none; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--c) 40%, transparent); }
.six-apps .six-soon .looks-app-name { font-size: var(--type-body); font-weight: var(--font-weight-normal); }
/* The held tile fills from the bottom while it is held. */
#sixDevTile { position: relative; overflow: hidden; }
#sixDevTile::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--cd); }
#sixDevTile.pressing::after { width: 100%; transition: width 1.2s linear; }
.six-dev { display: flex; flex-direction: column; gap: var(--space-sm); }
.six-dev[hidden] { display: none; }
.six-dev h3 { margin: var(--space-sm) 0 0; font-size: var(--type-body); color: var(--text-secondary); }

/* ── The panel under the header ───────────────────────────────────────── */
.six-dim {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgb(var(--shade) / 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--base) var(--ease);
}
.six-pull {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 100%;
    overflow-y: auto;
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: var(--card);
    box-shadow: var(--lift-2);
    transform: translateY(-105%);
    transition: transform var(--slow) var(--ease);
    box-sizing: border-box;
}
.six-below.open .six-pull { transform: none; }
.six-below.open .six-dim { opacity: 1; pointer-events: auto; }
.six-pull h4 { margin: var(--space-md) 0 0; font-size: var(--type-body); font-weight: var(--font-weight-medium); color: var(--text-secondary); }
.six-trow {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 60px;
    font-size: var(--type-spot);
    color: var(--text-primary);
}
.six-trow > svg { width: 28px; height: 28px; flex: none; }
.six-trow-name { flex: 1; display: flex; flex-direction: column; font-weight: var(--font-weight-medium); text-align: left; }
.six-trow-name small { font-size: var(--type-body); font-weight: var(--font-weight-normal); color: var(--text-secondary); }
.six-always { font-size: var(--type-body); font-weight: var(--font-weight-medium); color: var(--text-secondary); }
.six-trow-btn { width: 100%; padding: 0; border: 0; border-top: 1px solid var(--line); background: none; font-family: var(--font-family); cursor: pointer; }
.six-hash { width: 28px; text-align: center; font-size: 24px; font-weight: var(--font-weight-bold); color: var(--text-secondary); }
.six-chev { width: 20px; height: 20px; color: var(--text-secondary); }
.six-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: var(--type-body);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.six-more i { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.six-deeper { display: none; flex-direction: column; gap: var(--space-sm); padding-top: 6px; border-top: 1px solid var(--line); }
.six-below.deep .six-deeper { display: flex; }
.six-below.deep .six-more { display: none; }
.six-seg3 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--ground); }
.six-seg3 button {
    min-height: 48px;
    border: 0;
    border-radius: calc(var(--r-md) - 4px);
    background: none;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--type-body);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.six-seg3 button[aria-pressed="true"] { background: var(--card); box-shadow: var(--lift-1); }
.six-lang .profile-editor-language-section { margin: 0; padding: 0; }
.six-lang .profile-editor-label { display: none; }
.six-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--type-spot);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.six-link small { font-size: var(--type-body); font-weight: var(--font-weight-normal); color: var(--text-secondary); }

/* ── The first minute, and the toast ──────────────────────────────────── */
.six-tour,
.six-toast {
    position: absolute;
    left: var(--space-lg);
    right: var(--space-lg);
    bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    border-radius: var(--r-md);
    box-shadow: var(--lift-2);
}
.six-tour {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--card);
    border: 2px solid var(--c);
}
.six-tour p { margin: 0; font-size: var(--type-spot); line-height: 1.45; }
.six-tour div { display: flex; justify-content: flex-end; gap: var(--space-sm); }
.six-toast {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--text-primary);
    color: var(--card);
    font-size: var(--type-body);
}
.six-toast[hidden] { display: none; }
.six-toast span { flex: 1; line-height: 1.35; }
.six-toast button { min-height: 44px; padding: 0 6px; border: 0; background: none; color: inherit; font-weight: var(--font-weight-bold); text-decoration: underline; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .six-track, .six-pull, .six-row-top, .six-dim { transition: none; }
}