/* ============================================================
   Word Clock - app/word-clock/  (moved out of index.php 16 Oct 2026,
   page layout rebuilt 16 Oct 2026 L)
   Site palette: #4bb2d5 primary blue, #3b779b dark blue,
                 #3a9d85 teal, #ce3527 red
   The grid is sized in em off one font-size on .wc-frame, and that
   font-size follows the stage width (container units) inline, or the
   smaller of viewport width/height in fullscreen, so it never overflows.
   Grids bigger than 11 x 10 (Finnish is 13 x 11): JS sets --wc-cols and
   --wc-fit-w / --wc-fit-h (1 for 11 x 10, smaller for more cells) on the
   stage, and every font-size below is multiplied by them.
   ============================================================ */
.wc-stage{
    --clock-color:#ffffff;
    --glow:0.85;
    --ghost:0.08;
    --lit-op:1;
    background:#0a0a0a;
    border-radius:12px;
    padding:1.5rem 1rem;
    margin:1rem 0 1.5rem 0;
    box-shadow:rgba(0,0,0,.15) 0 4px 20px;
    text-align:center;
    container-type:inline-size;
    overflow:hidden;
}
.wc-frame{
    display:inline-block;
    position:relative;
    padding:1.1em;
    font-size:clamp(10px, 3.4vw, 26px);
    font-size:clamp(9px, calc(3.9cqi * var(--wc-fit-w, 1)), 30px);
}
.wc-grid{
    display:grid;
    grid-template-columns:repeat(var(--wc-cols, 11), 1.2em);
    column-gap:.7em;
    row-gap:.5em;
    font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
    font-weight:700;
    line-height:1;
    -webkit-user-select:none;
    user-select:none;
}
.wc-cell{
    color:rgba(255,255,255,var(--ghost));
    transition:color .35s ease, text-shadow .35s ease;
    text-align:center;
}
.wc-cell.lit{
    color:var(--clock-color);
    opacity:var(--lit-op);
    text-shadow:
        0 0 calc(8px * var(--glow)) var(--clock-color),
        0 0 calc(18px * var(--glow)) var(--clock-color);
}
.wc-dots{
    position:absolute;
    inset:.3em;
    pointer-events:none;
}
.wc-dot{
    position:absolute;
    width:.32em;height:.32em;
    min-width:5px;min-height:5px;
    border-radius:50%;
    background:rgba(255,255,255,var(--ghost));
    transition:background .35s ease, box-shadow .35s ease;
}
.wc-dot[data-dot="1"]{top:0;left:0;}
.wc-dot[data-dot="2"]{top:0;right:0;}
.wc-dot[data-dot="3"]{bottom:0;right:0;}
.wc-dot[data-dot="4"]{bottom:0;left:0;}
.wc-dot.lit{
    background:var(--clock-color);
    opacity:var(--lit-op);
    box-shadow:0 0 calc(8px * var(--glow)) var(--clock-color);
}
.wc-readout{margin-top:1rem;}
.wc-sentence{
    color:var(--clock-color);
    opacity:calc(.8 * var(--lit-op));
    font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
    font-size:1.05rem;
    font-size:clamp(.85rem, 3.2cqi, 1.25rem);
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow:0 0 calc(8px * var(--glow)) var(--clock-color);
    min-height:1.4em;
}
.wc-digital{
    margin-top:.35rem;
    color:var(--clock-color);
    opacity:calc(.6 * var(--lit-op));
    font:600 .95rem/1.2 Consolas,"Segoe UI",monospace;
    font-variant-numeric:tabular-nums;
    letter-spacing:1px;
}

/* Brightness levels (data-level is the effective level, so Auto resolves to dim or med) */
.wc-stage[data-level="dim"]{--glow:0.35;--ghost:0.05;--lit-op:.62;}
.wc-stage[data-level="med"]{--glow:0.85;--ghost:0.08;--lit-op:1;}
.wc-stage[data-level="bright"]{--glow:1.4;--ghost:0.13;--lit-op:1;}

/* Hide states */
.wc-stage[data-show-sentence="0"] .wc-readout{display:none;}
.wc-stage[data-show-dots="0"] .wc-dots{display:none;}
.wc-stage[data-ghost="0"] .wc-cell:not(.lit){color:transparent;}
.wc-stage[data-ghost="0"] .wc-dot:not(.lit){background:transparent;}

/* ============================================================
   Night Mode: dim red or amber on pure black.
   JS sets data-night="1" (On, or Auto inside the chosen hours) and
   data-night-color="red|amber" on the stage, which is also the
   fullscreen overlay. Overrides the chosen color and brightness on
   screen only: !important beats the inline --clock-color, and these
   rules come after the data-level ones, so both return untouched when
   night mode ends. Hex values match PrankKit.night.COLORS.
   ============================================================ */
.wc-stage[data-night="1"]{
    --clock-color:#b3121b !important;
    --night-ghost:rgba(179,18,27,.06);
    --glow:0;
    --lit-op:.78;
    background:#000;
}
.wc-stage[data-night="1"][data-night-color="amber"]{
    --clock-color:#c47a00 !important;
    --night-ghost:rgba(196,122,0,.055);
}
.wc-stage[data-night="1"] .wc-cell.lit,
.wc-stage[data-night="1"] .wc-sentence{text-shadow:none;}
.wc-stage[data-night="1"] .wc-dot.lit{box-shadow:none;opacity:.55;}
.wc-stage[data-night="1"][data-ghost="1"] .wc-cell:not(.lit){color:var(--night-ghost);}
.wc-stage[data-night="1"][data-ghost="1"] .wc-dot:not(.lit){background:var(--night-ghost);}
/* Sentence and digital readout sit a step dimmer than the lit words */
.wc-stage[data-night="1"] .wc-sentence{opacity:.5;}
.wc-stage[data-night="1"] .wc-digital{opacity:.4;}
/* 1.5s fade while night mode switches (class added by JS for 1.6s only) */
.wc-stage.wc-night-fading{transition:background-color 1.5s ease;}
.wc-stage.wc-night-fading .wc-cell,
.wc-stage.wc-night-fading .wc-dot,
.wc-stage.wc-night-fading .wc-sentence,
.wc-stage.wc-night-fading .wc-digital{transition:color 1.5s ease, background-color 1.5s ease, opacity 1.5s ease, text-shadow 1.5s ease, box-shadow 1.5s ease;}

/* ============================================================
   Fullscreen. The whole page goes fullscreen (so the touch Exit
   button and toast stay visible) and the stage is pinned over it.
   On iPhone Safari, which has no fullscreen API, the pinned stage
   alone still fills the screen.
   ============================================================ */
html.wc-fs,
html.wc-fs body{overflow:hidden;}
.wc-stage.is-fs{
    position:fixed;
    inset:0;
    z-index:2147483000;
    width:100%;height:100%;
    margin:0;
    padding:env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    border-radius:0;
    box-shadow:none;
    background:#000;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.wc-stage.is-fs .wc-frame{font-size:min(calc(3.9vw * var(--wc-fit-w, 1)), calc(4.3vh * var(--wc-fit-h, 1)), 64px);}
@supports (height:100dvh){
    .wc-stage.is-fs{height:100dvh;}
    .wc-stage.is-fs .wc-frame{font-size:min(calc(3.9vw * var(--wc-fit-w, 1)), calc(4.3dvh * var(--wc-fit-h, 1)), 64px);}
}
.wc-stage.is-fs .wc-sentence{font-size:min(4.4vw, 4.4vh, 2rem);}
.wc-stage.is-fs .wc-digital{font-size:min(3vw, 3vh, 1.25rem);}
.wc-stage.is-fs .wc-readout{margin-top:min(3vh, 2rem);}
.wc-stage.is-fs.wc-idle,
.wc-stage.is-fs.wc-idle *{cursor:none;}

/* Screensaver drift (fullscreen only). JS sets --drift-x / --drift-y on the
   stage every 60 s within a safe range; the grid, dots and sentence move
   together over 20 s, slow enough not to be noticed. */
.wc-stage.is-fs .wc-frame,
.wc-stage.is-fs .wc-readout{transform:translate(var(--drift-x, 0px), var(--drift-y, 0px));}
.wc-stage.is-fs.wc-drifting .wc-frame,
.wc-stage.is-fs.wc-drifting .wc-readout{transition:transform 20s ease-in-out;}
.wc-stage.wc-drift-snap .wc-frame,
.wc-stage.wc-drift-snap .wc-readout{transition:none !important;}

/* "Press Esc to exit" - shown for 3 s when fullscreen opens on a desktop */
.wc-fs-hint{display:none;}
.wc-stage.is-fs .wc-fs-hint{
    display:block;
    position:absolute;
    top:calc(16px + env(safe-area-inset-top, 0px));
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100% - 32px);
    margin:0;
    padding:.45rem 1rem;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.7);
    font:600 .875rem/1.3 "Open Sans",sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s ease;
}
.wc-stage.is-fs .wc-fs-hint.show{opacity:1;}

/* ============================================================
   Page shell (rebuilt 16 Oct 2026 to match the sibling /app/ tools)
   ============================================================ */
.wc-page .content__main{min-width:0;}
.wc-lead{
    margin:0 0 1.25rem;
    max-width:62ch;
    font-size:1.05rem;
    line-height:1.6;
    color:#3d5566;
}

/* ============================================================
   Controls - one card, four sections:
   (a) .wc-panel__top  Color | Brightness | Format (wrapping flex row)
   (b) .wc-night       Night Mode, own internal grid
   (c) Display toggles
   (d) .wc-actions     Fullscreen / Share / Reset
   The panel is a size container so the layout follows the card's own
   width (sidebar or not), not the viewport.
   ============================================================ */
.wc-panel{
    container:wcpanel / inline-size;
    background:#fff;
    border:1px solid #e1e8ed;
    border-radius:12px;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
    margin:0 0 2rem;
}
.wc-panel__top,
.wc-panel__section,
.wc-actions{padding:1.25rem 1.25rem;}
.wc-panel__section,
.wc-actions{border-top:1px solid #e6edf1;}

.wc-label{
    display:flex;align-items:center;gap:.4rem;
    margin:0 0 .6rem;
    font-size:.75rem;
    font-weight:700;
    line-height:1.2;
    color:#3b779b;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.wc-label .bi{font-size:.9rem;}
.wc-sublabel{
    display:block;
    margin:0 0 .35rem;
    font-size:.8rem;
    font-weight:600;
    line-height:1.2;
    color:#2f6e8d;
}
.wc-hint{
    margin:.5rem 0 0;
    font-size:.8rem;
    line-height:1.45;
    color:#5a6b78;
}

/* (a) top row: Color takes its own line until the card is wide enough for all three */
.wc-panel__top{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:1.25rem 2.25rem;
}
.wc-field{min-width:0;}
.wc-field--color{flex:1 1 100%;}
/* Hints wrap to the width of their control instead of widening the field */
.wc-panel__top .wc-field:not(.wc-field--color) .wc-hint{width:0;min-width:max(100%, 26ch);}

.wc-color-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;}
/* The six presets are one unit: one line of six, or two lines of three - never an orphan */
.wc-swatches{display:grid;grid-template-columns:repeat(6, 44px);gap:8px;}
.wc-color-swatch{
    width:44px;height:44px;
    border-radius:50%;
    border:3px solid #fff;
    box-shadow:0 0 0 1px #c9d6df;
    background:var(--swatch);
    cursor:pointer;
    padding:0;
    transition:transform .15s ease, box-shadow .15s ease;
}
.wc-color-swatch[data-color="#ffffff"]{box-shadow:0 0 0 1px #9fb2c0;}
.wc-color-swatch:hover{transform:scale(1.06);}
.wc-color-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px #2f6e8d;}
.wc-picker{
    display:inline-flex;align-items:center;gap:.5rem;
    min-height:44px;
    font-size:.85rem;font-weight:600;color:#2f6e8d;
    cursor:pointer;
}
#wcColorPicker{
    width:44px;height:44px;
    border:1px solid #c9d6df;
    border-radius:8px;
    cursor:pointer;
    padding:3px;
    background:#fff;
}

.wc-segmented{
    display:inline-flex;
    max-width:100%;
    border:1px solid #c9d6df;
    border-radius:8px;
    overflow:hidden;
    background:#f7fafb;
}
.wc-seg{
    flex:1 0 auto;
    background:transparent;
    border:none;
    min-height:44px;
    padding:.5rem .85rem;
    font:600 .85rem/1.2 "Open Sans",sans-serif;
    color:#2f6e8d;
    white-space:nowrap;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}
.wc-seg:not(:last-child){border-right:1px solid #c9d6df;}
.wc-seg:hover{background:#eaf2f7;}
.wc-seg[aria-pressed="true"]{background:#2f6e8d;color:#fff;}

/* Language select (after Format in the top row) */
.wc-select{
    display:block;
    width:100%;
    min-width:11rem;
    height:46px;   /* same outer height as the segmented controls */
    padding:.4rem .5rem;
    border:1px solid #c9d6df;
    border-radius:8px;
    background:#fff;
    color:#1d2a33;
    font:16px "Open Sans",sans-serif;   /* 16px so iPhone Safari does not zoom on focus */
    cursor:pointer;
}

/* (b) Night Mode */
.wc-night{background:#f8fafb;}
.wc-night__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem 1.5rem;
    align-items:end;
}
.wc-night .wc-segmented{display:flex;width:100%;background:#fff;}
.wc-seg--night{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;}
.wc-night-chip{width:12px;height:12px;border-radius:50%;background:var(--chip);box-shadow:0 0 0 1px rgba(0,0,0,.25);flex:none;}
.wc-seg[aria-pressed="true"] .wc-night-chip{box-shadow:0 0 0 2px #fff;}
.wc-night-hours{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.wc-night-field{display:block;min-width:0;}
.wc-night-field select{
    display:block;
    width:100%;
    height:46px;   /* same outer height as the segmented controls beside it */
    padding:.4rem .5rem;
    border:1px solid #c9d6df;
    border-radius:8px;
    background:#fff;
    color:#1d2a33;
    font:16px "Open Sans",sans-serif;   /* 16px so iPhone Safari does not zoom on focus */
    cursor:pointer;
}
.wc-night__hint{margin-top:.85rem;}
.wc-night-status{display:inline-block;margin-left:.2rem;font-weight:700;color:#9a1a20;}
.wc-night-status:empty{display:none;}

/* (c) Display toggles - pill chips that wrap */
.wc-toggles{display:flex;flex-wrap:wrap;gap:.5rem .6rem;}
.wc-toggle{
    display:inline-flex;align-items:center;gap:.55rem;
    min-height:44px;
    padding:.35rem .9rem .35rem .7rem;
    border:1px solid #d5e0e7;
    border-radius:999px;
    background:#fff;
    font-size:.875rem;
    color:#2f6e8d;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}
.wc-toggle:hover{background:#f2f7fa;border-color:#b6d0de;}
.wc-toggle:has(input:checked){background:#eaf4f9;border-color:#9cc3d6;}
.wc-toggle input{accent-color:#2f6e8d;width:20px;height:20px;margin:0;flex:none;}

/* (d) Actions bar */
.wc-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.6rem;
    background:#fbfcfd;
    border-radius:0 0 12px 12px;
}
.wc-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:44px;
    padding:.6rem 1.1rem;
    border:1px solid transparent;
    border-radius:8px;
    background:#5f7a8f;
    color:#fff !important;
    font:600 .9rem/1.2 "Open Sans",sans-serif;
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.wc-btn:hover{background:#3b779b;}
.wc-btn-primary{background:#2c7d69;}
.wc-btn-primary:hover{background:#235f51;}
.wc-btn-ghost{
    margin-left:auto;
    background:transparent;
    border-color:#c9d6df;
    color:#2f6e8d !important;
}
.wc-btn-ghost:hover{background:#eaf2f7;border-color:#9cc3d6;}

.wc-share-box{
    display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
    margin:0 1.25rem 1.25rem;
    padding:.6rem;
    background:#eaf2f7;
    border-radius:8px;
}
.wc-share-box label{font-size:.85rem;color:#2f6e8d;font-weight:600;}
.wc-share-box input{flex:1 1 200px;min-width:0;min-height:44px;padding:.4rem .5rem;border:1px solid #c9d6df;border-radius:6px;font-size:16px;}

/* Container widths: wide card puts all three top fields on one line,
   Night Mode goes to four columns; narrow card stacks and the
   action buttons go full width. */
@container wcpanel (min-width: 600px){
    .wc-night__grid{grid-template-columns:1fr 1fr;}
    .wc-night__grid .wc-night-hours{grid-column:1 / -1;gap:1rem 1.5rem;}
}
@container wcpanel (min-width: 760px){
    .wc-night__grid{grid-template-columns:auto auto minmax(240px, 1fr);}
    .wc-night__grid .wc-night-hours{grid-column:auto;gap:.75rem;}
}
@container wcpanel (min-width: 1000px){
    .wc-field--color{flex:0 1 auto;}
}
@container wcpanel (max-width: 520px){
    .wc-panel__top,
    .wc-panel__section,
    .wc-actions{padding:1rem;}
    .wc-panel__top .wc-field{flex:1 1 100%;}
    .wc-panel__top .wc-segmented{display:flex;width:100%;}
    .wc-select{min-width:0;}
    .wc-panel__top .wc-field:not(.wc-field--color) .wc-hint{width:auto;}
    .wc-seg{flex:1 1 auto;padding:.5rem .4rem;}
    .wc-actions{display:grid;grid-template-columns:1fr 1fr;}
    .wc-actions .wc-btn-primary{grid-column:1 / -1;}
    .wc-btn-ghost{margin-left:0;}
    .wc-share-box{margin:0 1rem 1rem;}
}
/* Narrower than six 44px swatches: two even rows of three */
@container wcpanel (max-width: 335px){
    .wc-swatches{grid-template-columns:repeat(3, 44px);}
    .wc-toggle{flex:1 1 100%;border-radius:10px;}
}

.wc-color-swatch:focus-visible,
.wc-seg:focus-visible,
.wc-btn:focus-visible,
#wcColorPicker:focus-visible,
.wc-toggle input:focus-visible,
.wc-night-field select:focus-visible,
.wc-select:focus-visible,
.wc-related-card:focus-visible,
.wc-share-box input:focus-visible {outline:3px solid #4bb2d5;outline-offset:2px;}
.wc-seg:focus-visible{outline-offset:-3px;}

/* Toast */
.wc-toast{
    position:fixed;
    left:50%;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    transform:translate(-50%, 12px);
    z-index:2147483646;
    max-width:calc(100% - 32px);
    padding:.7rem 1.1rem;
    border-radius:8px;
    background:#1d2a33;
    color:#fff;
    font:600 .9rem/1.3 "Open Sans",sans-serif;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
}
.wc-toast.show{opacity:1;transform:translate(-50%, 0);}
/* Size to the text, not to the half-width left by left:50% (stops short toasts wrapping) */
.wc-toast{width:max-content;text-align:center;}
/* Phones in fullscreen: the kit's Exit button sits bottom centre, so the toast goes above it */
@media (max-width:600px){
    html.wc-fs .wc-toast{bottom:calc(76px + env(safe-area-inset-bottom, 0px));}
}

/* ============================================================
   Content cards below the clock - same .info-card / .use-case
   patterns as app/digital-clock, scoped to .wc-page
   ============================================================ */
.wc-page .info-card{
    background:#fff;
    border:1px solid #e6edf1;
    border-radius:12px;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
    margin:0 0 1.5rem;
    overflow:hidden;
}
.wc-page .info-card__header{
    display:flex;align-items:center;gap:.75rem;
    padding:1rem 1.25rem;
    background:#f8f9fa;
    border-bottom:1px solid #e9ecef;
}
.wc-page .info-card__header > .bi{font-size:1.25rem;color:#3b8fb0;flex-shrink:0;}
.wc-page .info-card__title{
    margin:0;
    font:700 1.1rem/1.3 "Trebuchet MS",Arial,sans-serif;
    color:#2f6e8d;
}
.wc-page .info-card__body{padding:1.25rem;container-type:inline-size;}
.wc-page .info-card__body > p{margin:0 0 1rem;color:#46606f;line-height:1.65;}
.wc-page .info-card__body > p:last-child{margin-bottom:0;}
.wc-page .content__main kbd{
    display:inline-block;
    min-width:1.9em;
    padding:2px 7px;
    border:1px solid #c9d6df;
    border-bottom-width:2px;
    border-radius:5px;
    background:#f1f4f6;
    color:#2f6e8d;
    font:600 .85em/1.4 Consolas,"Segoe UI",monospace;
    text-align:center;
}

/* How it works: five-minute steps as compact chips */
.wc-subhead{
    margin:1.5rem 0 .75rem;
    font:700 .8rem/1.2 "Open Sans",sans-serif;
    color:#3b779b;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.wc-steps{
    list-style:none;
    margin:0;padding:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.5rem;
}
.wc-steps li{
    display:flex;align-items:center;gap:.6rem;
    min-width:0;
    padding:.5rem .7rem;
    background:#f8fafb;
    border:1px solid #e6edf1;
    border-radius:8px;
    font:700 .78rem/1.25 "Trebuchet MS",Arial,sans-serif;
    letter-spacing:.04em;
    color:#2f6e8d;
}
.wc-steps__min{
    flex:none;
    min-width:2.6em;
    padding:2px 0;
    border-radius:5px;
    background:#2f6e8d;
    color:#fff;
    font:600 .75rem/1.3 Consolas,"Segoe UI",monospace;
    text-align:center;
    letter-spacing:0;
}
.wc-page .info-card__body > .wc-steps__note{margin-top:.75rem;font-size:.85rem;color:#5a6b78;}

/* "Open the clock in:" language chips (end of the How it works card).
   Chips grow to fill each line, so the wrap looks even at any width. */
.wc-try{margin-top:1.25rem;padding-top:1rem;border-top:1px solid #e6edf1;}
.wc-page .info-card__body .wc-try__label{margin:0 0 .6rem;font-size:.85rem;font-weight:600;color:#2f6e8d;}
.wc-try__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.wc-try__list li{flex:1 1 auto;display:flex;}
.wc-try__chip{
    flex:1 1 auto;
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;
    padding:.4rem .9rem;
    border:1px solid #d5e0e7;
    border-radius:999px;
    background:#fff;
    color:#2f6e8d !important;
    font-size:.875rem;
    font-weight:600;
    line-height:1.2;
    text-decoration:none !important;
    white-space:nowrap;
    transition:background .15s ease, border-color .15s ease;
}
.wc-try__chip:hover{background:#eef6fa;border-color:#9cc3d6;}
.wc-try__chip[aria-current="true"]{background:#2f6e8d;border-color:#2f6e8d;color:#fff !important;}
.wc-try__chip:focus-visible{outline:3px solid #4bb2d5;outline-offset:2px;}
/* Room above the clock when a chip scrolls it into view under the sticky header */
.wc-stage{scroll-margin-top:72px;}
@container (min-width: 480px){ .wc-steps{grid-template-columns:repeat(3, minmax(0, 1fr));} }
@container (min-width: 840px){ .wc-steps{grid-template-columns:repeat(4, minmax(0, 1fr));} }

/* Features at a glance */
.wc-features{
    list-style:none;
    margin:0;padding:0;
    display:grid;
    grid-template-columns:1fr;
    gap:.75rem;
}
@container (min-width: 520px){ .wc-features{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.wc-feature{
    display:flex;align-items:flex-start;gap:.85rem;
    padding:.9rem 1rem;
    background:#f8fafb;
    border:1px solid #e6edf1;
    border-radius:10px;
}
.wc-feature > .bi{
    flex:none;
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;
    border-radius:10px;
    background:#e3f0f6;
    color:#2f6e8d;
    font-size:1.1rem;
}
.wc-feature__title{margin:0 0 .2rem;font-size:.9rem;font-weight:700;line-height:1.3;color:#2f6e8d;}
.wc-feature__desc{margin:0;font-size:.84rem;line-height:1.45;color:#5a6b78;}

/* Good uses */
.wc-page .use-cases{display:grid;grid-template-columns:1fr;gap:.75rem;}
@container (min-width: 440px){ .wc-page .use-cases{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@container (min-width: 660px){ .wc-page .use-cases{grid-template-columns:repeat(3, minmax(0, 1fr));} }
.wc-page .use-case{padding:.9rem 1rem;background:#f8fafb;border:1px solid #e6edf1;border-radius:10px;}
.wc-page .use-case__icon{margin:0 0 .45rem;color:#3b779b;font-size:1.25rem;line-height:1;}
.wc-page .use-case__title{margin:0 0 .25rem;font-size:.9rem;font-weight:700;color:#2f6e8d;}
.wc-page .use-case__desc{margin:0;font-size:.84rem;line-height:1.45;color:#5a6b78;}

/* Keyboard shortcuts */
.wc-keys{margin:0;display:grid;grid-template-columns:1fr;gap:.5rem;}
@container (min-width: 560px){ .wc-keys{grid-template-columns:repeat(2, minmax(0, 1fr));} .wc-keys__row:last-child:nth-child(odd){grid-column:1 / -1;} }
.wc-keys__row{
    display:flex;align-items:center;gap:.85rem;
    min-height:48px;
    margin:0;
    padding:.5rem .85rem;
    background:#f8fafb;
    border:1px solid #e6edf1;
    border-radius:8px;
}
.wc-keys dt{flex:none;min-width:5.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;color:#5a6b78;}
.wc-keys dd{margin:0;font-size:.875rem;line-height:1.4;color:#46606f;}

/* Related tools */
.wc-related{display:grid;grid-template-columns:1fr;gap:.75rem;}
@container (min-width: 440px){ .wc-related{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@container (min-width: 700px){ .wc-related{grid-template-columns:repeat(3, minmax(0, 1fr));} }
.wc-related-card{
    display:flex;align-items:center;gap:.75rem;
    min-height:44px;
    padding:.85rem 1rem;
    background:#f8fafb;
    border:1px solid #e6edf1;
    border-radius:10px;
    color:#2f6e8d !important;
    text-decoration:none !important;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.wc-related-card:hover{background:#eef6fa;border-color:#9cc3d6;transform:translateY(-2px);}
.wc-related-card > .bi{
    flex:none;
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;
    border-radius:10px;
    background:#e2f2ee;
    color:#2c7d69;
    font-size:1.1rem;
}
.wc-related-card > span{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.wc-related-card strong{font-size:.9rem;line-height:1.3;}
.wc-related-card small{font-size:.8rem;line-height:1.35;color:#5a6b78;font-weight:400;}

/* Mobile */
@media (max-width:768px){
    .wc-stage{padding:1.25rem .5rem;}
    .wc-lead{font-size:1rem;}
}
@media (max-width:480px){
    .wc-page .info-card__header{padding:.85rem 1rem;}
    .wc-page .info-card__body{padding:1rem;}
}

@media (prefers-reduced-motion: reduce){
    .wc-try__chip,
    .wc-cell,.wc-dot,.wc-color-swatch,.wc-seg,.wc-btn,.wc-toggle,.wc-related-card,.wc-toast {transition:none;}
    .wc-color-swatch:hover,.wc-related-card:hover{transform:none;}
    .wc-stage.wc-night-fading,
    .wc-stage.wc-night-fading .wc-cell,
    .wc-stage.wc-night-fading .wc-dot,
    .wc-stage.wc-night-fading .wc-sentence,
    .wc-stage.wc-night-fading .wc-digital{transition:none !important;}
    .wc-stage.is-fs .wc-frame,
    .wc-stage.is-fs .wc-readout,
    .wc-stage.is-fs .wc-fs-hint{transition:none !important;}
}