/* ==========================================================================
   WrimoForge — "Sunlit Forge" design system
   --------------------------------------------------------------------------
   Ported from the Claude Design handoff (ref/design_handoff_wrimoforge).
   This sheet replaces Tabler's CSS entirely; Tabler's JS bundle (Bootstrap 5)
   is still loaded for tab / modal / dropdown behaviour, so the small set of
   framework classes that JS toggles (.tab-pane, .fade, .show, .modal*) are
   reimplemented here in the new visual language.
   ========================================================================== */

:root{
    --ink:#322C3C;
    --ink-soft:#4E4659;
    --ink-mute:#7A7385;
    --gold:#ECAE57;
    --gold-deep:#C68A2E;
    --gold-glow:#F6CC85;
    --cream:#FBEEDC;
    --cream-deep:#EDDFC4;
    --mist:#BCB3C9;
    --linen:#F3E8DC;
    --paper:#FEFDFB;

    --success:#3F7A5E;
    --success-light:#6FA98A;
    --danger:#A33A3A;
    --danger-deep:#7A2828;

    /* genre accents */
    --mystery:#3F558A;
    --fantasy:#7A4C9C;
    --memoir:#3C7A66;
    --adventure:#B86A36;

    --shadow-card:0 1px 0 rgba(50,44,60,.04), 0 12px 28px -20px rgba(50,44,60,.18);
    --shadow-card-hover:0 1px 0 rgba(50,44,60,.04), 0 20px 36px -20px rgba(50,44,60,.28);
    --shadow-modal:0 30px 70px -30px rgba(50,44,60,.5);
    --hairline:1px solid rgba(188,179,201,.45);
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
    font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    color:var(--ink);
    font-size:15px;
    -webkit-font-smoothing:antialiased;
    background:
        radial-gradient(ellipse 80% 50% at 80% 0%, rgba(236,174,87,.14) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(188,179,201,.18) 0%, transparent 60%),
        var(--linen);
    background-attachment:fixed;
    min-height:100vh;
}

/* Fixed paper-grain overlay. Must never scroll. */
body::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.35  0 0 0 0 0.2  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    mix-blend-mode:multiply; opacity:.5;
}
h1,h2,h3,h4,h5,h6{ font-family:inherit; }

/* Phosphor normalisation — both the fill and bold weight sheets are loaded. */
i[class*="ph-"]{
    font-style:normal;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
/* Phosphor ships no x-fat / plus-fat to match check-fat. */
i.ico-fat{ -webkit-text-stroke:.85px currentColor; }


/* ==========================================================================
   Framework shims — the classes Bootstrap's JS toggles
   ========================================================================== */

.fade{ transition:opacity .15s linear; }
.fade:not(.show){ opacity:0; }
@media (prefers-reduced-motion:reduce){ .fade{ transition:none; } }

.tab-content > .tab-pane{ display:none; }
.tab-content > .tab-pane.active{ display:block; }

.modal{
    position:fixed; inset:0; z-index:1055;
    display:none; width:100%; height:100%;
    overflow-x:hidden; overflow-y:auto;
    outline:0;
    padding:32px 24px;
}
.modal-backdrop{
    position:fixed; inset:0; z-index:1050;
    width:100vw; height:100vh;
    background:rgba(50,44,60,.38);
}
.modal-backdrop.fade{ opacity:0; }
.modal-backdrop.show{ opacity:1; }
body.modal-open{ overflow:hidden; }

.modal-dialog{
    position:relative;
    width:100%; max-width:560px;
    margin:auto;                       /* centres AND stays scrollable when tall */
    pointer-events:none;
    min-height:calc(100% - 1px);
    display:flex;
}
.modal-dialog.modal-sm{ max-width:440px; }
.modal-dialog.modal-lg{ max-width:560px; }
.modal-dialog.modal-xl{ max-width:720px; }

.modal.fade .modal-content{ opacity:0; transform:translateY(10px) scale(.97); }
.modal.show .modal-content{
    animation:panelIn 200ms cubic-bezier(0.34,1.3,0.64,1) both;
}
@keyframes panelIn{
    from{ opacity:0; transform:translateY(10px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.modal-content{
    position:relative;
    width:100%;
    margin:auto;
    pointer-events:auto;
    display:flex; flex-direction:column;
    background:var(--paper);
    border:1px solid rgba(188,179,201,.5);
    border-radius:22px;
    padding:28px 32px 30px;
    box-shadow:var(--shadow-modal);
}

/* Blur the whole app behind a modal. A filter on an ancestor would trap the
   modal in its stacking context, so the modals live outside .page-wrapper. */
.page-wrapper.blurred{ filter:blur(4px); }
.page-wrapper{ transition:filter .18s ease; }

.modal-head{
    display:flex; align-items:center; gap:12px;
    padding-right:44px; padding-bottom:14px; margin-bottom:22px;
    border-bottom:1px dashed rgba(188,179,201,.55);
}
.modal-head .gem{
    width:14px; height:14px; flex:0 0 auto;
    background:var(--gold);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.modal-head h2{
    margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
}
.modal-close{
    position:absolute; top:14px; right:14px;
    width:34px; height:34px; border-radius:50%;
    background:var(--cream); border:1.5px solid var(--mist);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-mute); cursor:pointer;
    transition:color .12s, border-color .12s, background .12s;
    z-index:2;
}
.modal-close i{ font-size:15px; }
.modal-close:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream-deep); }
.modal-foot{
    display:flex; justify-content:flex-end; align-items:center; gap:12px;
    margin-top:26px;
}
.modal-foot .spacer{ margin-right:auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */

/* The forged CTA — a 3-slice border-image skin. The left and right 79px caps
   stay rigid while the 1px middle column stretches to any width. */
.wf-btn{
    position:relative;
    isolation:isolate;
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    height:56px;
    min-width:116px;
    padding:0 39px 7px 39px;      /* extra bottom offsets the skin's shadow lip */
    border:0; background:transparent; cursor:pointer;
    font-family:inherit;
    font-weight:800; font-size:15px;
    letter-spacing:.01em;
    line-height:1;
    color:#FFFFFF;
    text-shadow:0 -2px 0 rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.15);
    transition:filter .12s ease, transform .08s ease;
    user-select:none;
}
.wf-btn::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    border:0 solid transparent;
    border-left-width:58px; border-right-width:58px;
    border-image-slice:0 79 fill;
    border-image-width:0 58px;
    border-image-repeat:stretch;
    pointer-events:none;
}
a.wf-btn{ text-decoration:none; }
.wf-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.wf-btn:hover{ filter:brightness(1.08); }        /* lighten only — never lift */
.wf-btn:active{ filter:brightness(.92); transform:translateY(2px); }
.wf-btn:disabled,
.wf-btn.disabled{ cursor:not-allowed; filter:grayscale(.7) opacity(.6); transform:none; }
.wf-btn i{ flex:0 0 auto; }
.wf-btn.bluegreen::before{ border-image-source:url("../images/brand/btn-bluegreen.png"); }

/* Cap width scales with height at the skin's native ratio 79/77. */
.wf-btn.sm{ height:48px; min-width:98px; padding:0 30px 5px; }
.wf-btn.sm::before{ border-left-width:49px; border-right-width:49px; border-image-width:0 49px; }
.wf-btn.lg{ height:77px; min-width:158px; padding:0 50px 9px; font-size:22px; }
.wf-btn.lg::before{ border-left-width:79px; border-right-width:79px; border-image-width:0 79px; }
.wf-btn.block{ width:100%; }

/* Flat buttons — used where a forged button would be too loud (Write screen). */
.flat-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:0 16px; height:40px;
    background:var(--paper);
    border:1.5px solid var(--gold);
    border-radius:11px;
    font:inherit; font-size:13.5px; font-weight:700;
    color:var(--gold-deep);
    cursor:pointer;
    transition:background .12s, border-color .12s, color .12s;
}
.flat-btn:hover{ background:var(--cream); border-color:var(--gold-deep); }
.flat-btn.block{ width:100%; }
.flat-btn.solid{
    background:linear-gradient(180deg, var(--gold-glow), var(--gold));
    border-color:var(--gold-deep);
    color:var(--ink);
}
.flat-btn.solid:hover{ filter:brightness(1.05); background:linear-gradient(180deg, var(--gold-glow), var(--gold)); }

.text-btn{
    background:transparent; border:0; cursor:pointer;
    font:inherit; font-size:14px; font-weight:700;
    color:var(--ink-mute);
    padding:10px 6px;
    transition:color .12s;
    text-decoration:none;
}
.text-btn:hover{ color:var(--ink); }
.text-btn.danger{ color:var(--danger); }
.text-btn.danger:hover{ color:var(--danger-deep); }

/* Square icon button (card kebab, row actions). */
.icon-btn{
    width:46px; height:46px; flex:0 0 auto;
    background:var(--paper); border:1.5px solid var(--mist);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-mute); cursor:pointer;
    transition:color .12s, border-color .12s, background .12s;
}
.icon-btn:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream); }
.icon-btn.open{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream); }
.icon-btn.sm{ width:40px; height:40px; border-radius:11px; }
.icon-btn.accept:hover{ color:var(--success); border-color:var(--success); background:rgba(63,122,94,.09); }
.icon-btn.decline:hover{ color:var(--danger); border-color:var(--danger); background:rgba(163,58,58,.09); }
.icon-btn.on{ color:var(--gold-deep); border-color:var(--gold-deep); background:var(--cream); }

/* ==========================================================================
   Form primitives — shared by every form in the app
   ========================================================================== */

.f-stack{ display:flex; flex-direction:column; gap:20px; }
.f-pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.f-group{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.f-label{
    display:flex; align-items:center; gap:8px;
    font-size:11px; font-weight:700; letter-spacing:.18em;
    color:var(--ink-mute); text-transform:uppercase;
}
.f-label .req{ color:var(--gold-deep); }
.f-label .opt{ color:var(--ink-mute); font-weight:600; opacity:.75; letter-spacing:.1em; }
.f-ctl{
    display:flex; align-items:center; gap:12px;
    padding:0 16px; height:52px;
    background:var(--paper);
    border:2px solid var(--mist);
    border-radius:14px;
    transition:border-color .15s, box-shadow .15s;
}
.f-ctl:focus-within{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(236,174,87,.18); }
.f-ctl.tall{ height:54px; border-radius:14px; }
.f-ctl.invalid{ border-color:var(--danger); }
.f-ctl.invalid:focus-within{ box-shadow:0 0 0 4px rgba(163,58,58,.16); }
.f-ctl > i{ color:var(--ink-mute); flex:0 0 auto; font-size:19px; transition:color .15s; }
.f-ctl:focus-within > i{ color:var(--gold-deep); }
.f-ctl input,
.f-ctl select,
.f-ctl textarea{
    flex:1; min-width:0;
    background:transparent; border:0; outline:0;
    font-family:inherit; font-size:15px; font-weight:500;
    color:var(--ink); line-height:normal;
    appearance:none; -webkit-appearance:none;
    cursor:inherit;
}
/* appearance:none alone does not remove Chromium's number spinner. */
.f-ctl input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.f-ctl input[type=number]::-webkit-outer-spin-button,
.f-ctl input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
/* appearance:none selects clip glyph descenders at line-height:1. */
.f-ctl select{ cursor:pointer; padding:0 4px 0 0; height:100%; text-overflow:ellipsis; }
.f-ctl input::placeholder,
.f-ctl textarea::placeholder{ color:var(--ink-mute); font-weight:400; font-style:italic; }
.f-ctl .caret{ margin-left:auto; font-size:13px; color:var(--ink-mute); pointer-events:none; flex:0 0 auto; }
.f-ctl .reveal{
    background:transparent; border:0; padding:0; cursor:pointer;
    color:var(--ink-mute); font-size:19px; flex:0 0 auto;
    display:flex; align-items:center;
    transition:color .12s;
}
.f-ctl .reveal:hover{ color:var(--gold-deep); }
.f-hint{ font-size:12.5px; color:var(--ink-mute); line-height:1.4; }
.f-error{
    display:flex; align-items:center; gap:9px;
    padding:12px 15px;
    background:rgba(163,58,58,.08);
    border:1px solid rgba(163,58,58,.3);
    border-radius:12px;
    color:var(--danger-deep);
    font-size:13.5px; font-weight:600;
    line-height:1.4;
}
.f-error i{ font-size:17px; flex:0 0 auto; }
.f-error[hidden]{ display:none; }

/* Custom checkbox */
.f-check{
    display:inline-flex; align-items:center; gap:9px;
    font-size:13.5px; font-weight:600; color:var(--ink-soft);
    cursor:pointer; user-select:none;
}
.f-check input{ position:absolute; opacity:0; width:0; height:0; }
.f-check .box{
    width:18px; height:18px; flex:0 0 auto;
    border:2px solid var(--mist); border-radius:6px;
    background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    color:transparent; font-size:11px;
    transition:background .12s, border-color .12s, color .12s;
}
.f-check input:checked + .box{ background:var(--gold); border-color:var(--gold-deep); color:#FFFFFF; }
.f-check input:focus-visible + .box{ box-shadow:0 0 0 4px rgba(236,174,87,.22); }
/* A consent line that wraps: the box stays on the first line of text */
.f-check.agree{ display:flex; align-items:flex-start; line-height:1.45; }
.f-check.agree .box{ margin-top:1px; }
.f-check.agree a{ color:var(--gold-deep); font-weight:700; }
.f-check.invalid .box{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(163,58,58,.12); }

/* Gold ±step control for number fields */
.stepper{ display:flex; flex-direction:column; gap:2px; flex:0 0 auto; }
.stepper button{
    width:22px; height:18px;
    background:var(--cream); border:1px solid var(--mist);
    border-radius:5px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-mute); cursor:pointer; padding:0;
    transition:color .12s, background .12s, border-color .12s;
}
.stepper button:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream-deep); }
.stepper button i{ font-size:10px; }

/* Cream readout box (goal pace, unstuck prompt, encouragement) */
.readout{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px;
    background:var(--cream);
    border:1px solid rgba(188,179,201,.5);
    border-radius:14px;
}
.readout > i{ font-size:22px; color:var(--gold-deep); flex:0 0 auto; }
.readout .txt{ font-size:13.5px; color:var(--ink-soft); line-height:1.45; }
.readout .txt b{ color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; }

.confirm-copy{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
.confirm-copy b{ color:var(--ink); }

/* ==========================================================================
   Progress bar — left-anchored border-image fill over a flat tint.
   Square corners: the fill art is rectangular.
   ========================================================================== */

.bar{
    position:relative;
    height:16px;
    width:100%;
    background:rgba(50,44,60,.13);
    overflow:hidden;
}
.bar-fill{
    position:absolute; top:0; bottom:0; left:0;
    height:100%;
    width:0;                          /* JS animates up to data-target */
    border:0 solid transparent;
    border-left-width:4px;
    border-image-source:url("../images/brand/bar-fill-orange.png");
    border-image-slice:0 0 0 5 fill;
    border-image-width:0 0 0 4px;
    border-image-repeat:stretch;
    pointer-events:none;
}
.bar.slim{ height:12px; }
.bar.slim .bar-fill{ border-left-width:3px; border-image-width:0 0 0 3px; }

/* Flat bar — the writing surface, where the image bar would shout. */
.flat-bar{
    position:relative; height:7px; width:100%;
    background:rgba(50,44,60,.12);
    border-radius:4px; overflow:hidden;
}
.flat-bar > span{
    position:absolute; inset:0 auto 0 0;
    width:0; border-radius:4px;
    background:linear-gradient(90deg, var(--gold), var(--gold-deep));
    transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.flat-bar.done > span{ background:linear-gradient(90deg, var(--success-light), var(--success)); }
.flat-bar.mini{ height:5px; }

/* ==========================================================================
   Hex gem motif
   ========================================================================== */

.gem{
    display:inline-block;
    background:var(--gold);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.gem.lg{ width:14px; height:14px; }
.gem.sm{ width:9px; height:9px; }

/* ==========================================================================
   Context menu — appended to <body> at position:fixed so it escapes the
   card's overflow:hidden and never clips at the viewport edge.
   ========================================================================== */

.ctx-menu{
    position:fixed;
    min-width:196px;
    background:var(--paper);
    border:1px solid rgba(188,179,201,.55);
    border-radius:14px;
    padding:6px;
    z-index:1200;
    box-shadow:0 18px 40px -18px rgba(50,44,60,.45), 0 2px 6px rgba(50,44,60,.08);
    animation:ctxIn 140ms cubic-bezier(0.34,1.3,0.64,1) both;
}
.ctx-menu[hidden]{ display:none; }
@keyframes ctxIn{
    from{ opacity:0; transform:translateY(-6px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}
.ctx-menu button,
.ctx-menu a{
    display:flex; align-items:center; gap:11px;
    width:100%;
    padding:10px 12px;
    background:transparent; border:0; cursor:pointer;
    font:inherit; font-size:14px; font-weight:600;
    color:var(--ink);
    border-radius:9px;
    text-align:left; text-decoration:none;
    transition:background .12s, color .12s;
}
.ctx-menu button i,
.ctx-menu a i{ font-size:17px; color:var(--ink-mute); transition:color .12s; }
.ctx-menu button:hover,
.ctx-menu a:hover{ background:var(--cream); }
.ctx-menu button:hover i,
.ctx-menu a:hover i{ color:var(--gold-deep); }
.ctx-menu .sep{ height:1px; margin:5px 8px; background:rgba(188,179,201,.5); }
.ctx-menu button.danger,
.ctx-menu a.danger{ color:var(--danger); }
.ctx-menu button.danger i,
.ctx-menu a.danger i{ color:var(--danger); }
.ctx-menu button.danger:hover,
.ctx-menu a.danger:hover{ background:rgba(163,58,58,.09); }
.ctx-menu button.danger:hover i,
.ctx-menu a.danger:hover i{ color:var(--danger); }

/* Bootstrap dropdown (header account menu) wears the same skin. */
.dropdown{ position:relative; }
.dropdown-menu{
    position:absolute;
    display:none;
    min-width:196px;
    margin:0;
    background:var(--paper);
    border:1px solid rgba(188,179,201,.55);
    border-radius:14px;
    padding:6px;
    z-index:1200;
    list-style:none;
    box-shadow:0 18px 40px -18px rgba(50,44,60,.45), 0 2px 6px rgba(50,44,60,.08);
}
.dropdown-menu.show{
    display:block;
    animation:ctxIn 140ms cubic-bezier(0.34,1.3,0.64,1) both;
}
.dropdown-menu-end{ right:0; left:auto; }
.dropdown-item{
    display:flex; align-items:center; gap:11px;
    width:100%;
    padding:10px 12px;
    background:transparent; border:0; cursor:pointer;
    font:inherit; font-size:14px; font-weight:600;
    color:var(--ink);
    border-radius:9px;
    text-align:left; text-decoration:none;
    transition:background .12s, color .12s;
}
.dropdown-item i{ font-size:17px; color:var(--ink-mute); transition:color .12s; }
.dropdown-item:hover{ background:var(--cream); }
.dropdown-item:hover i{ color:var(--gold-deep); }
.dropdown-item.danger{ color:var(--danger); }
.dropdown-item.danger i{ color:var(--danger); }
.dropdown-item.danger:hover{ background:rgba(163,58,58,.09); }
.dropdown-divider{ height:1px; margin:5px 8px; background:rgba(188,179,201,.5); }

/* ==========================================================================
   Spark particles — strike bursts, ember loops, cheer bursts
   ========================================================================== */

.spark{
    position:absolute;
    pointer-events:none;
    will-change:transform, opacity;
    z-index:1;
    filter:drop-shadow(0 0 5px rgba(246,204,133,.65));
}
.spark.fixed{ position:fixed; z-index:1300; }

/* ==========================================================================
   Loading / empty states
   ========================================================================== */

.wf-loading{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; padding:56px 24px;
    color:var(--ink-mute);
    font-size:13.5px; font-weight:600;
}
.wf-spinner{
    width:28px; height:28px;
    border:3px solid rgba(188,179,201,.45);
    border-top-color:var(--gold);
    border-radius:50%;
    animation:spin .7s linear infinite;
}
.wf-spinner.sm{ width:16px; height:16px; border-width:2px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.wf-empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:40px 24px; text-align:center;
}
.wf-empty i{ font-size:34px; color:var(--mist); }
.wf-empty .title{ font-size:15px; font-weight:700; color:var(--ink); }
.wf-empty .sub{ font-size:13px; color:var(--ink-mute); line-height:1.5; max-width:280px; }

/* ==========================================================================
   Shared chrome — header, nav, page shell
   ========================================================================== */

.page-wrapper{ position:relative; z-index:1; min-height:100vh; }

.header{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px;
    padding:20px 48px;
    background:rgba(254,253,251,.7);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:var(--hairline);
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand .mark{
    width:46px; height:46px;
    object-fit:contain;
    filter:drop-shadow(0 4px 8px rgba(50,44,60,.15));
}
.brand .wordmark{
    font-family:"Germania One", serif;
    font-size:30px; line-height:1;
    color:var(--ink); margin:0;
    letter-spacing:.005em;
    font-weight:400;
}

/* The tab strip keeps Bootstrap's markup so tab('show') and shown.bs.tab
   keep working; only the skin changes. */
.nav-tabs{
    display:flex; align-items:center; gap:4px;
    list-style:none; margin:0; padding:0;
}
.nav-tabs .nav-item{ display:flex; }
.nav-tabs .nav-link{
    display:flex; align-items:center; gap:8px;
    padding:10px 18px;
    font-size:14px; font-weight:600;
    color:var(--ink-mute);
    text-decoration:none; border-radius:10px;
    border:0; background:transparent;
    cursor:pointer;
    transition:color .15s, background .15s;
    letter-spacing:.005em;
    white-space:nowrap;
}
.nav-tabs .nav-link i{ flex:0 0 auto; font-size:18px; transition:color .15s; }
.nav-tabs .nav-link:hover{ color:var(--ink); background:rgba(188,179,201,.18); }
.nav-tabs .nav-link.active{ color:var(--ink); background:rgba(236,174,87,.18); }

.header-right{ display:flex; align-items:center; gap:14px; }

.avatar{
    width:42px; height:42px; flex:0 0 auto;
    border-radius:50%;
    background:#E76A4D;
    border:2px solid var(--paper);
    box-shadow:0 0 0 1.5px var(--gold-deep), 0 3px 8px rgba(50,44,60,.18);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    overflow:hidden;
    color:#FFF8E7;
    transition:box-shadow .12s;
    padding:0;
    cursor:pointer;
}
.avatar img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.avatar:hover{ box-shadow:0 0 0 1.5px var(--gold-deep), 0 5px 12px rgba(50,44,60,.28); }
.avatar.sm{ width:34px; height:34px; }
.avatar.lg{ width:52px; height:52px; box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--mist); border:0; }
.avatar.lg.me{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--gold-deep); }

.page{
    position:relative; z-index:1;
    max-width:1300px;
    margin:0 auto;
    padding:48px 48px 96px;
}
.page-head{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:32px;
    gap:24px; flex-wrap:wrap;
}
.page-head h1{
    margin:0;
    font-size:34px; font-weight:700;
    letter-spacing:-.015em;
    color:var(--ink);
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.page-head h1 .count{ font-size:18px; font-weight:600; color:var(--ink-mute); }
.page-head .sub{ font-size:14px; color:var(--ink-mute); margin:8px 0 0; line-height:1.5; }
.page-head .headline{ display:flex; flex-direction:column; }
.page-head .meta{ display:flex; align-items:center; gap:14px; color:var(--ink-mute); font-size:13px; }

/* Gold status pill next to a page title */
.gold-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px;
    background:rgba(236,174,87,.18);
    border:1px solid rgba(198,138,46,.35);
    border-radius:999px;
    font-size:12.5px; font-weight:700;
    color:var(--gold-deep);
    letter-spacing:.02em;
    white-space:nowrap;
}
.gold-pill .gem{ width:9px; height:9px; }
.gold-pill[hidden]{ display:none; }

/* Generic panel used across Profile / Friends / Write */
.panel{
    background:var(--paper);
    border:var(--hairline);
    border-radius:18px;
    box-shadow:var(--shadow-card);
    overflow:hidden;
}
.panel-head{
    display:flex; align-items:center; gap:10px;
    padding:16px 20px;
    border-bottom:var(--hairline);
}
.panel-head > i{ font-size:17px; color:var(--gold-deep); }
.panel-head h2{
    margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em;
    color:var(--ink); flex:1; min-width:0;
}
.panel-head .tally{ font-size:12.5px; font-weight:700; color:var(--ink-mute); }
.panel-head .act{
    width:30px; height:30px; flex:0 0 auto;
    background:var(--cream); border:1px solid var(--mist);
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-mute); cursor:pointer; font-size:13px;
    transition:color .12s, border-color .12s, background .12s;
}
.panel-head .act:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream-deep); }

/* Section eyebrow with a hex gem marker */
.eyebrow{
    display:flex; align-items:center; gap:9px;
    font-size:11.5px; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-mute);
}

/* ==========================================================================
   Novels (dashboard)
   ========================================================================== */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
    gap:24px;
}

@keyframes cardIn{
    0%{ opacity:0; transform:scale(.92); }
    100%{ opacity:1; transform:scale(1); }
}
.grid > .anim{ animation:cardIn 500ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }

.create-new{
    background:transparent;
    border:2px dashed var(--mist);
    border-radius:20px;
    padding:32px 24px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:16px;
    min-height:380px;
    cursor:pointer;
    transition:border-color .15s, background .15s;
    position:relative;
    overflow:visible;
}
.create-new:hover{ border-color:var(--gold); background:rgba(236,174,87,.06); }
.create-new .bubble{
    width:80px; height:80px;
    background:url("../images/brand/btn-circle-blue.png") center/contain no-repeat;
    display:flex; align-items:center; justify-content:center;
    color:#FFFFFF;
    filter:drop-shadow(0 6px 12px rgba(50,44,60,.25));
    transition:transform .12s, filter .12s;
    position:relative;
    z-index:2;
}
.create-new:hover .bubble{ filter:drop-shadow(0 8px 16px rgba(50,44,60,.32)) brightness(1.06); }
.create-new .bubble i{ transform:translateY(-2px); filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)); }
.create-new h3{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.005em; color:var(--ink); }
.create-new p{
    margin:0; max-width:240px;
    font-size:14px; color:var(--ink-mute); line-height:1.5;
    font-style:italic;
}
.create-new .hint{
    margin-top:6px;
    font-size:11px; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:var(--gold-deep);
}

.novel{
    background:var(--paper);
    border:var(--hairline);
    border-radius:20px;
    overflow:hidden;
    display:flex; flex-direction:column;
    transition:box-shadow .15s, border-color .15s;
    box-shadow:var(--shadow-card);
}
.novel:hover{ box-shadow:var(--shadow-card-hover); border-color:rgba(188,179,201,.7); }

/* Cover: genre gradient + colour-burn illustration + bottom scrim */
.cover{
    position:relative;
    height:170px;
    overflow:hidden;
    border-bottom:1px solid rgba(188,179,201,.35);
    background:linear-gradient(135deg,#5878B5 0%, #3F558A 70%, #2B3C66 100%);
}
.cover .art,
.mini-cover .art{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    mix-blend-mode:color-burn;
    opacity:.25;
    pointer-events:none;
}
.cover::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.18) 100%);
}
.cover .status{
    position:absolute; top:14px; left:14px; z-index:1;
    display:flex; align-items:center; gap:6px;
    padding:5px 12px;
    background:rgba(50,44,60,.55);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    color:#FFF8E7;
    font-size:10.5px; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.cover .status .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--gold-glow);
    box-shadow:0 0 6px var(--gold);
    animation:statusPulse 2.4s ease-in-out infinite;
}
@keyframes statusPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.cover .cover-title{
    position:absolute; left:18px; right:18px; bottom:14px; z-index:1;
    font-weight:800;
    font-size:22px; line-height:1.1;
    color:#FFF8E7;
    text-shadow:0 2px 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5);
    letter-spacing:-.01em;
    overflow-wrap:anywhere;
}

.novel-body{
    padding:16px 20px 18px;
    display:flex; flex-direction:column; gap:12px;
    flex:1;
}
.meta-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
    font-size:12px; color:var(--ink-mute);
}
.genre-chip{
    display:flex; align-items:center; gap:6px;
    font-size:12px; font-weight:700;
    letter-spacing:.15em; text-transform:uppercase;
    color:var(--ink-mute);
    min-width:0;
}
.genre-chip span.label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.genre-chip .gem{ width:8px; height:8px; flex:0 0 auto; }
.day-stamp{
    font-size:11.5px; color:var(--ink-mute);
    display:flex; align-items:center; gap:6px; flex:0 0 auto;
}
.progress-block{ display:flex; flex-direction:column; gap:6px; }
.progress-line{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:10px;
    font-size:13px;
}
.progress-line .now{
    font-weight:800; color:var(--ink);
    font-size:18px;
    font-variant-numeric:tabular-nums;
}
.progress-line .goal{ color:var(--ink-mute); font-weight:500; font-variant-numeric:tabular-nums; }
.progress-line .pct{
    font-size:12px; font-weight:700;
    color:var(--gold-deep);
    letter-spacing:.04em;
    font-variant-numeric:tabular-nums;
}
.card-cta{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.card-cta .wf-btn{ flex:1; }

/* Genre accent tokens — the gem colour on a novel's genre chip and the
   gradient behind its cover. Every genre the app supports has an entry. */
.g-fantasy            { --genre:#7A4C9C; --g1:#A26FC4; --g2:#7A4C9C; --g3:#533370; }
.g-science-fiction    { --genre:#2F6F8F; --g1:#5AA0BE; --g2:#2F6F8F; --g3:#1B4356; }
.g-romance            { --genre:#A9436B; --g1:#D2789B; --g2:#A9436B; --g3:#6E2544; }
.g-mystery            { --genre:#3F558A; --g1:#5878B5; --g2:#3F558A; --g3:#2B3C66; }
.g-thriller           { --genre:#8A3F3F; --g1:#BB6A6A; --g2:#8A3F3F; --g3:#5A2323; }
.g-horror             { --genre:#4A3F5E; --g1:#6F5F87; --g2:#4A3F5E; --g3:#2A2237; }
.g-historical-fiction { --genre:#8A6A2E; --g1:#C29B55; --g2:#8A6A2E; --g3:#57411A; }
.g-adventure          { --genre:#B86A36; --g1:#D89360; --g2:#B86A36; --g3:#6E3A18; }
.g-comedy             { --genre:#B08A1E; --g1:#E0BC55; --g2:#B08A1E; --g3:#6F5510; }
.g-drama              { --genre:#3C7A66; --g1:#5DA88D; --g2:#3C7A66; --g3:#275548; }
.g-other              { --genre:#5F5670; --g1:#8A7F9D; --g2:#5F5670; --g3:#3B3548; }
.genre-chip .gem{ background:var(--genre, var(--ink-mute)); }

/* Cover colour swatches. The eight slots match the stored nv_color values;
   genre still drives the illustration, the swatch only drives the gradient. */
.c0{ --g1:#5878B5; --g2:#3F558A; --g3:#2B3C66; }   /* indigo   */
.c1{ --g1:#A26FC4; --g2:#7A4C9C; --g3:#533370; }   /* amethyst */
.c2{ --g1:#5DA88D; --g2:#3C7A66; --g3:#275548; }   /* verdant  */
.c3{ --g1:#D89360; --g2:#B86A36; --g3:#6E3A18; }   /* ember    */
.c4{ --g1:#5AA0BE; --g2:#2F6F8F; --g3:#1B4356; }   /* tidewater*/
.c5{ --g1:#D2789B; --g2:#A9436B; --g3:#6E2544; }   /* rose     */
.c6{ --g1:#C29B55; --g2:#8A6A2E; --g3:#57411A; }   /* brass    */
.c7{ --g1:#6F5F87; --g2:#4A3F5E; --g3:#2A2237; }   /* dusk     */
/* .mini-cover is the home page's smaller version of the same card face. */
.cover.tinted,
.mini-cover.tinted{ background:linear-gradient(135deg, var(--g1) 0%, var(--g2) 70%, var(--g3) 100%); }

.covers{ display:flex; gap:11px; flex-wrap:wrap; }
.cover-dot{
    width:44px; height:44px;
    border-radius:12px;
    border:2px solid rgba(50,44,60,.14);
    cursor:pointer;
    position:relative;
    padding:0;
    background:linear-gradient(135deg, var(--g1), var(--g3));
    transition:transform .1s, box-shadow .12s, border-color .12s;
}
.cover-dot:hover{ transform:translateY(-2px); }
.cover-dot.on{ border-color:var(--paper); box-shadow:0 0 0 3px var(--gold-deep); }
.cover-dot i{
    position:absolute; inset:0;
    display:none;
    align-items:center; justify-content:center;
    color:#fff; font-size:20px;
    pointer-events:none;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.cover-dot.on i{ display:flex; }

/* ==========================================================================
   Profile
   ========================================================================== */

.profile-grid{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:28px;
    align-items:start;
}

.char-card{
    background:var(--paper);
    border:var(--hairline);
    border-radius:20px;
    padding:32px 28px 28px;
    box-shadow:var(--shadow-card);
    position:sticky; top:24px;
}
.portrait-wrap{ position:relative; width:200px; height:200px; margin:0 auto 18px; }
.portrait{
    width:200px; height:200px;
    border-radius:50%;
    position:relative;
    background:linear-gradient(180deg, #F08566, #E76A4D);
    box-shadow:
        0 0 0 4px var(--gold),
        0 0 0 6px var(--ink),
        0 0 0 9px var(--paper),
        0 0 0 12px var(--gold-deep),
        0 18px 36px -12px rgba(50,44,60,.4);
    overflow:hidden;
    display:flex; align-items:flex-end; justify-content:center;
}
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.portrait .fallback{
    margin:auto;
    font-size:96px; color:rgba(255,255,255,.85);
}
.avatar > i{ font-size:20px; }
.portrait-wrap::after{
    content:"";
    position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
    width:30px; height:30px;
    background:var(--gold);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,.18),
        inset 0 2px 0 rgba(255,255,255,.35),
        0 0 0 2px var(--ink),
        0 4px 8px rgba(50,44,60,.3);
    z-index:2;
}
.edit-avatar{
    position:absolute;
    right:2px; bottom:10px;
    width:44px; height:44px;
    border-radius:50%;
    background:linear-gradient(180deg, var(--gold-glow), var(--gold) 58%, var(--gold-deep));
    border:2px solid var(--paper);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 0 0 1.5px var(--gold-deep),
        0 4px 10px rgba(50,44,60,.28);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink);
    cursor:pointer;
    z-index:3;
    transition:filter .12s, transform .08s;
}
.edit-avatar:hover{ filter:brightness(1.07); }
.edit-avatar:active{ transform:translateY(1px); }

.name-block{ text-align:center; margin:24px 0 4px; }
.pen-name{
    font-size:26px; font-weight:800;
    color:var(--ink); margin:0;
    letter-spacing:-.01em;
    overflow-wrap:anywhere;
}
.title-line{
    margin-top:4px;
    font-size:13px; font-weight:700;
    color:var(--gold-deep);
    letter-spacing:.18em; text-transform:uppercase;
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.title-line::before, .title-line::after{
    content:""; width:24px; height:1px; background:var(--gold); opacity:.55;
}

.badge-shelf{ padding:0 0 20px; border-top:1px dashed rgba(188,179,201,.55); margin-top:22px; }
.badge-shelf .shelf-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:10px;
    padding:14px 4px 12px;
}
.badge-shelf .shelf-head .t{
    font-size:11px; font-weight:700; letter-spacing:.15em;
    text-transform:uppercase; color:var(--ink-mute);
}
.badge-shelf .shelf-head a{
    font-size:11.5px; font-weight:700; letter-spacing:.04em;
    color:var(--gold-deep); text-decoration:none; white-space:nowrap; cursor:pointer;
}
.badge-shelf .shelf-head a:hover{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); }
.badge-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.mini-badge{
    position:relative;
    aspect-ratio:1;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    transition:filter .12s;
    cursor:pointer;
}
.mini-badge:hover{ filter:brightness(1.05) drop-shadow(0 3px 8px rgba(198,138,46,.35)); }
.mini-badge img{ width:100%; height:100%; object-fit:contain; display:block; }
.mini-badge.more{
    border:1.5px dashed var(--mist);
    border-radius:12px;
    font-size:13px; font-weight:800;
    color:var(--ink-mute);
    transition:color .12s, border-color .12s, background .12s;
}
.mini-badge.more:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream); filter:none; }

.stats{ list-style:none; margin:0; padding:0; border-top:1px dashed rgba(188,179,201,.55); }
.stats li{
    display:flex; align-items:center; gap:14px;
    padding:14px 4px;
    border-bottom:1px dashed rgba(188,179,201,.45);
    opacity:0;
    animation:rowIn 200ms ease-out both;
}
.stats li:last-child{ border-bottom:none; }
.stats li:nth-child(1){ animation-delay:0ms; }
.stats li:nth-child(2){ animation-delay:100ms; }
.stats li:nth-child(3){ animation-delay:200ms; }
.stats li:nth-child(4){ animation-delay:300ms; }
@keyframes rowIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}
.stats .icon{
    width:36px; height:36px; flex:0 0 auto;
    border-radius:10px;
    background:rgba(236,174,87,.16);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-deep);
    font-size:17px;
}
.stats .info{ flex:1; display:flex; flex-direction:column; min-width:0; }
.stats .label{
    font-size:11px; font-weight:700; letter-spacing:.15em;
    text-transform:uppercase; color:var(--ink-mute);
}
.stats .value{
    font-size:18px; font-weight:800; color:var(--ink);
    font-variant-numeric:tabular-nums;
    margin-top:2px;
}
.stats .value .unit{ font-weight:500; color:var(--ink-mute); font-size:13px; margin-left:4px; }

.forms-col{ display:flex; flex-direction:column; gap:24px; }
.form-card{
    background:var(--paper);
    border:var(--hairline);
    border-radius:20px;
    padding:28px 32px;
    box-shadow:var(--shadow-card);
}
.form-card .head{
    display:flex; align-items:center; gap:12px;
    margin-bottom:20px;
    padding-bottom:14px;
    border-bottom:1px dashed rgba(188,179,201,.55);
}
.form-card .head .gem{ width:14px; height:14px; flex:0 0 auto; }
.form-card .head h2{ margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; }
.form-card .head .hint{
    margin-left:auto;
    font-size:11px; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-mute);
}
.form-foot{
    display:flex; justify-content:flex-end; align-items:center;
    gap:12px;
    margin-top:22px;
}

/* Avatar customizer */
.avatar-editor{
    display:grid;
    grid-template-columns:200px minmax(0, 1fr);
    gap:26px;
    align-items:start;
}
.preview-col{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    position:sticky; top:0;
    min-width:0;
}
.preview-ring{
    width:170px; height:170px;
    margin:12px;                    /* room for the outer rings so they don't clip */
    border-radius:50%;
    background:#E76A4D;
    overflow:hidden;
    flex:0 0 auto;
    box-shadow:
        0 0 0 4px var(--gold),
        0 0 0 6px var(--ink),
        0 0 0 9px var(--paper),
        0 0 0 12px var(--gold-deep),
        0 14px 28px -10px rgba(50,44,60,.4);
}
.preview-ring img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.randomize{
    display:inline-flex; align-items:center; gap:7px;
    margin-top:6px;
    padding:8px 16px;
    background:var(--cream);
    border:1.5px solid var(--mist);
    border-radius:10px;
    font:inherit; font-size:12px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-soft); cursor:pointer;
    transition:color .12s, border-color .12s, background .12s;
}
.randomize:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream-deep); }

.traits{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    min-width:0;
}
.trait{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
    padding:8px 6px 8px 12px;
    background:var(--cream);
    border:1px solid rgba(188,179,201,.55);
    border-radius:14px;
    min-width:0;
    opacity:0;
}
.modal.show .traits .trait{ animation:rowIn 200ms ease-out both; }
.trait[hidden]{ display:none; }
.trait-label{
    font-size:11px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-mute);
    flex:1 1 auto; min-width:0;
    overflow-wrap:anywhere;
}
.trait-controls{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.trait-arrow{
    width:28px; height:28px;
    flex:0 0 auto;
    background:var(--paper);
    border:1.5px solid var(--mist);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-mute); cursor:pointer;
    font-size:12px;
    transition:color .12s, border-color .12s, background .12s;
}
.trait-arrow:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream-deep); }

/* ==========================================================================
   Badges
   ========================================================================== */

.completion{ min-width:280px; flex:0 1 340px; }
.completion .lbl{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.completion .lbl .t{
    font-size:11px; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-mute);
}
.completion .lbl .v{
    font-size:15px; font-weight:800; color:var(--ink);
    font-variant-numeric:tabular-nums;
}
.completion .lbl .v span{ color:var(--ink-mute); font-weight:500; font-size:13px; }

.track{ margin-bottom:44px; }
.track:last-child{ margin-bottom:0; }
.track-head{
    display:flex; align-items:center; gap:14px;
    padding-bottom:14px; margin-bottom:22px;
    border-bottom:1px dashed var(--mist);
    flex-wrap:wrap;
}
.track-head .gem{ width:14px; height:14px; flex:0 0 auto; }
.track-head h2{ margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; }
.track-head .desc{ font-size:13px; color:var(--ink-mute); }
.track-head .tally{
    margin-left:auto;
    font-size:12px; font-weight:700; letter-spacing:.1em;
    color:var(--ink-mute); text-transform:uppercase;
    white-space:nowrap;
}
.track-head .tally b{ color:var(--gold-deep); }

.badge-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
    gap:18px;
}

@keyframes badgeIn{
    from{ opacity:0; transform:scale(.93); }
    to{ opacity:1; transform:scale(1); }
}
.badge-cell{
    perspective:1000px;
    animation:badgeIn 300ms cubic-bezier(0.34, 1.35, 0.64, 1) both;
}
.badge-flip{
    position:relative;
    transform-style:preserve-3d;
    transition:transform .5s cubic-bezier(.4,.2,.2,1);
    height:100%;
}
.badge-cell.flipped .badge-flip{ transform:rotateY(180deg); }

.badge{
    position:relative;
    background:var(--paper);
    border:var(--hairline);
    border-radius:18px;
    padding:22px 16px 18px;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    text-align:center;
    height:100%;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transition:box-shadow .15s, border-color .15s;
    box-shadow:0 1px 0 rgba(50,44,60,.04), 0 10px 24px -20px rgba(50,44,60,.18);
}
.badge.earned{
    border-color:rgba(198,138,46,.5);
    background:linear-gradient(180deg, var(--paper) 0%, #FFF9EE 100%);
    cursor:pointer;
}
.badge.earned:hover{
    border-color:var(--gold-deep);
    box-shadow:0 1px 0 rgba(50,44,60,.04), 0 16px 30px -18px rgba(198,138,46,.45);
}
.badge.locked{
    background:rgba(254,253,251,.55);
    border-style:dashed;
    border-color:rgba(188,179,201,.6);
}
.badge.back{
    position:absolute; inset:0;
    transform:rotateY(180deg);
    justify-content:center; gap:9px;
    cursor:pointer;
    overflow:auto;
}
.badge.back .name{ font-size:14.5px; }
.badge.back .desc{ font-size:12px; color:var(--ink-soft); line-height:1.45; }
.badge.back .earned-on{ margin-top:2px; }

.medallion{
    position:relative;
    width:88px; height:96px;
    display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
}
.medallion .plate{ position:absolute; inset:0; width:100%; height:100%; }
.medallion img{
    position:relative; z-index:1;
    width:100%; height:100%;
    object-fit:contain;
    display:block;
}
.medallion .glyph{ position:relative; z-index:1; font-size:36px; transform:translateY(-3px); }
.badge.earned .glyph{ color:var(--ink); }
.badge.locked .glyph{ color:rgba(122,115,133,.65); }
.badge.locked .medallion img{ filter:grayscale(1) opacity(.55); }
/* soft warm halo behind an earned medallion */
.badge.earned .medallion::before{
    content:"";
    position:absolute; inset:-16px;
    background:radial-gradient(circle, rgba(236,174,87,.3) 0%, transparent 68%);
    z-index:0; pointer-events:none;
}

.pips{ display:flex; align-items:center; gap:5px; height:9px; }
.pips i{
    width:9px; height:9px;
    display:block;
    background:rgba(188,179,201,.55);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pips i.on{
    background:linear-gradient(180deg, var(--gold-glow), var(--gold-deep));
    box-shadow:0 0 6px rgba(236,174,87,.7);
}

.badge .name{
    font-size:14px; font-weight:700; line-height:1.25;
    letter-spacing:-.005em;
    color:var(--ink);
}
.badge.locked .name{ color:var(--ink-mute); font-weight:600; }
.badge .req{ font-size:11.5px; color:var(--ink-mute); line-height:1.35; }
.badge .earned-on{
    font-size:10.5px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold-deep);
}
.badge .mini{ width:100%; margin-top:2px; }
.badge .mini .track-bar{
    height:5px; width:100%;
    background:rgba(50,44,60,.12);
    border-radius:3px; overflow:hidden;
}
.badge .mini .track-bar > span{
    display:block; height:100%;
    background:linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
    border-radius:3px;
}
.badge .mini .num{
    margin-top:5px;
    font-size:10.5px; font-weight:700; color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
}
.lock-chip{
    position:absolute; top:12px; right:12px;
    width:22px; height:22px;
    border-radius:50%;
    background:rgba(188,179,201,.28);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-mute);
    font-size:11px;
}

/* Achievement-unlocked celebration */
.achievement-body{
    display:flex; flex-direction:column; align-items:center;
    text-align:center; gap:6px;
}
.achievement-medallion{
    position:relative;
    width:170px; height:170px;
    display:flex; align-items:center; justify-content:center;
    margin:4px 0 10px;
}
.achievement-medallion::before{
    content:"";
    position:absolute; inset:-10px;
    background:radial-gradient(circle, rgba(236,174,87,.45) 0%, transparent 68%);
}
.achievement-medallion img{
    position:relative; z-index:1;
    width:100%; height:100%; object-fit:contain;
}
/* Craft badges have no PNG yet: the placeholder plate fills the medallion and
   the glyph sits on top of it, the same way it does on a badge tile. */
.achievement-medallion .plate{ position:absolute; inset:0; width:100%; height:100%; }
.achievement-medallion .glyph-svg{ position:relative; z-index:1; width:64px; height:64px; }
.achievement-medallion lottie-player{
    position:absolute; top:50%; left:50%;
    width:330px; height:330px;
    transform:translate(-50%,-50%);
    pointer-events:none; z-index:2;
    /* The stock celebration animation is blue and magenta; warm it into the
       Sunlit Forge palette rather than replacing the asset. */
    filter:sepia(.65) saturate(1.7) hue-rotate(-12deg) brightness(1.05);
    opacity:.9;
}
.achievement-eyebrow{
    font-size:11px; font-weight:700; letter-spacing:.2em;
    text-transform:uppercase; color:var(--gold-deep);
}
.achievement-body h3{ margin:2px 0 0; font-size:24px; font-weight:800; letter-spacing:-.01em; }
.achievement-body p{ margin:0; font-size:14px; color:var(--ink-soft); line-height:1.55; max-width:380px; }
.achievement-detail{
    margin-top:6px;
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px;
    background:rgba(236,174,87,.18);
    border:1px solid rgba(198,138,46,.35);
    border-radius:999px;
    font-size:12.5px; font-weight:700; color:var(--gold-deep);
}

/* ==========================================================================
   Friends
   ========================================================================== */

.friends-grid{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:28px; align-items:start;
}

.card{
    background:var(--paper);
    border:var(--hairline);
    border-radius:20px;
    box-shadow:var(--shadow-card);
    overflow:hidden;
}
.card-head{
    display:flex; align-items:center; gap:12px;
    padding:22px 26px 16px;
    border-bottom:1px dashed rgba(188,179,201,.55);
}
.card-head .gem{ width:14px; height:14px; flex:0 0 auto; }
.card-head h2{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.card-head .pill{
    margin-left:auto;
    font-size:11px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-mute);
    padding:4px 11px;
    background:rgba(188,179,201,.22);
    border-radius:999px;
    white-space:nowrap;
}
.card-body{ padding:22px 26px 26px; }

.roster{ padding:8px 0 10px; }
.roster .row{
    display:grid;
    grid-template-columns:34px 52px minmax(0,1fr) 150px 108px;
    align-items:center; gap:16px;
    padding:14px 26px;
    border-bottom:1px dashed rgba(188,179,201,.4);
    isolation:isolate;
    transition:opacity .25s ease, transform .25s ease;
}
.roster .row:last-child{ border-bottom:none; }
.roster .row.me{ background:rgba(236,174,87,.09); }
.roster .row.leaving{ opacity:0; transform:translateX(28px); }

.rank{
    font-size:15px; font-weight:800;
    color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
    text-align:center;
    position:relative;
}
.rank.top{ color:var(--ink); }
.rank.top::before{
    content:"";
    position:absolute; inset:-5px -3px;
    background:var(--gold);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    z-index:-1;
    opacity:.45;
}

.who{ display:flex; align-items:center; gap:13px; min-width:0; }
.roster .row .pic{
    width:52px; height:52px; flex:0 0 auto;
    border-radius:50%;
    background:#E76A4D;
    overflow:hidden;
    box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--mist);
    display:flex; align-items:center; justify-content:center;
    color:#FFF8E7; font-size:22px;
}
.roster .row.me .pic{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--gold-deep); }
.roster .row .pic img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.who .meta{ display:flex; flex-direction:column; min-width:0; gap:3px; }
.who .nm{
    font-size:15px; font-weight:700; color:var(--ink);
    letter-spacing:-.005em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.who .nm .you{
    margin-left:7px;
    font-size:9.5px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold-deep);
    padding:2px 7px;
    background:rgba(236,174,87,.2);
    border-radius:999px;
    vertical-align:middle;
}
.who .ttl{
    font-size:11.5px; color:var(--ink-mute);
    display:flex; align-items:center; gap:7px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.who .ttl .streak{
    display:inline-flex; align-items:center; gap:3px;
    color:var(--gold-deep); font-weight:700;
}

.prog{ min-width:0; }
.prog .nums{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
    font-size:12px;
}
.prog .nums b{
    font-size:14px; font-weight:800; color:var(--ink);
    font-variant-numeric:tabular-nums;
}
.prog .nums span{ color:var(--ink-mute); font-weight:500; }

.row-actions{ display:flex; justify-content:flex-end; gap:8px; }

.invite-cta{ display:flex; justify-content:center; padding:4px 0 20px; }

.req-row{
    display:flex; align-items:center; gap:12px;
    padding:12px 0;
    border-bottom:1px dashed rgba(188,179,201,.4);
    transition:opacity .25s ease, transform .25s ease;
}
.req-row:last-of-type{ border-bottom:none; }
.req-row.leaving{ opacity:0; transform:translateX(28px); }
.req-row .pic{
    width:42px; height:42px; flex:0 0 auto;
    border-radius:50%; background:#E76A4D; overflow:hidden;
    box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--mist);
    display:flex; align-items:center; justify-content:center;
    color:#FFF8E7; font-size:18px;
}
.req-row .pic img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.req-row .meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.req-row .nm{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.req-row .when{ font-size:11px; color:var(--ink-mute); }
.req-row .btns{ display:flex; gap:6px; flex:0 0 auto; }
.mini-btn{
    width:32px; height:32px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:1.5px solid var(--mist);
    background:var(--paper); color:var(--ink-mute);
    font-size:13px;
    transition:color .12s, border-color .12s, background .12s;
}
.mini-btn.ok:hover{ color:#2E6B52; border-color:#2E6B52; background:rgba(46,107,82,.1); }
.mini-btn.no:hover{ color:#8E3A3A; border-color:#8E3A3A; background:rgba(142,58,58,.1); }
.mini-btn:disabled{ opacity:.5; cursor:default; }

.sub-head{
    display:flex; align-items:center; gap:9px;
    margin:4px 0 6px;
    font-size:11px; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-mute);
}
.sub-head .n{
    color:var(--gold-deep);
    padding:2px 8px;
    background:rgba(236,174,87,.18);
    border-radius:999px;
    letter-spacing:.05em;
}
.sub-head.spaced{ margin-top:22px; }
.empty-note{
    font-size:13px; color:var(--ink-mute); font-style:italic;
    padding:6px 0 2px;
}
.empty-note.plain{ font-style:normal; }

.sent-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:10px 0;
    border-bottom:1px dashed rgba(188,179,201,.4);
    font-size:13.5px;
    transition:opacity .25s ease, transform .25s ease;
}
.sent-row:last-child{ border-bottom:none; }
.sent-row.leaving{ opacity:0; transform:translateX(28px); }
.sent-row .addr{ color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sent-row .right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.sent-row .state{
    font-size:10.5px; font-weight:700; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-mute);
    white-space:nowrap;
}

/* Friend search results inside the invite modal */
.search-results{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.search-hit{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    background:var(--cream);
    border:1px solid rgba(188,179,201,.55);
    border-radius:14px;
}
.search-hit .pic{
    width:40px; height:40px; flex:0 0 auto;
    border-radius:50%; background:#E76A4D; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    color:#FFF8E7; font-size:18px;
}
.search-hit .pic img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.search-hit .meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.search-hit .nm{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-hit .em{ font-size:11.5px; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Friend's novels modal */
.friend-novels{ display:flex; flex-direction:column; gap:14px; }
.friend-novel{
    display:flex; align-items:center; gap:14px;
    padding:14px 16px;
    background:var(--cream);
    border:1px solid rgba(188,179,201,.5);
    border-radius:16px;
}
.friend-novel .swatch{
    width:44px; height:56px; flex:0 0 auto;
    border-radius:8px;
    background:linear-gradient(135deg, var(--g1) 0%, var(--g2) 70%, var(--g3) 100%);
    box-shadow:0 3px 8px rgba(50,44,60,.2);
}
.friend-novel .meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.friend-novel .nm{ font-size:15px; font-weight:700; overflow-wrap:anywhere; }
.friend-novel .sub{
    font-size:11px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-mute);
}
.friend-novel .nums{ font-size:12px; color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.friend-novel .nums b{ color:var(--ink); font-weight:800; }

/* ==========================================================================
   Write — the drafting surface.
   Calmer than the rest of the app: no paper grain, softer gradients, and no
   forged buttons. Quill runs headless here; the toolbar below is ours and
   drives the editor through Quill's API.
   ========================================================================== */

body.write{
    background:
        radial-gradient(ellipse 80% 50% at 80% 0%, rgba(236,174,87,.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(188,179,201,.14) 0%, transparent 60%),
        var(--linen);
    background-attachment:fixed;
}
body.write::before{ content:none; }

.topbar{
    display:flex; align-items:center; gap:14px;
    padding:18px 30px;
    max-width:1460px; margin:0 auto;
}
.topbar .spacer{ flex:1; }
.back{
    display:inline-flex; align-items:center; gap:9px;
    padding:9px 15px 9px 12px;
    background:var(--paper);
    border:1px solid rgba(188,179,201,.55);
    border-radius:10px;
    font-size:13.5px; font-weight:600;
    color:var(--ink-soft); text-decoration:none;
    transition:color .12s, border-color .12s, background .12s;
}
.back i{ font-size:15px; }
.back:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--cream); }
.tb-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 14px;
    background:transparent; border:1px solid transparent;
    border-radius:10px;
    font:inherit; font-size:13px; font-weight:600;
    color:var(--ink-mute); cursor:pointer;
    transition:color .12s, border-color .12s, background .12s;
}
.tb-btn i{ font-size:15px; }
.tb-btn:hover{ color:var(--ink); background:var(--paper); border-color:rgba(188,179,201,.55); }
.tb-btn.on{ color:var(--gold-deep); background:rgba(236,174,87,.14); border-color:rgba(198,138,46,.4); }

.work{
    max-width:1460px; margin:0 auto;
    padding:0 30px 64px;
    display:grid;
    grid-template-columns:236px minmax(0,1fr) 292px;
    gap:24px;
    align-items:start;
}

.work .panel{ border-radius:16px; box-shadow:none; }
.work .panel-head{
    padding:16px 18px 13px;
    border-bottom:1px solid rgba(188,179,201,.35);
}
.work .panel-head > i{ font-size:16px; color:var(--gold-deep); }
.work .panel-head h2{
    font-size:12px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-mute);
}

/* Chapters rail — derived live from the H1 headings in the draft. */
.chapters{ position:sticky; top:18px; }
.ch-list{ padding:8px; display:flex; flex-direction:column; gap:2px; }
.ch{
    display:flex; align-items:center; gap:10px;
    width:100%;
    padding:11px 12px;
    background:transparent; border:0; border-radius:10px;
    font:inherit; font-size:13.5px; font-weight:500;
    color:var(--ink-soft); cursor:pointer;
    text-align:left;
    transition:background .12s, color .12s;
}
.ch .n{
    flex:0 0 auto;
    font-size:10.5px; font-weight:700;
    color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
    min-width:14px;
}
.ch .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch .w{
    flex:0 0 auto;
    font-size:10.5px; font-weight:600; color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
}
.ch:hover{ background:var(--cream); color:var(--ink); }
.ch.on{ background:rgba(236,174,87,.16); color:var(--ink); font-weight:700; }
.ch.on .n, .ch.on .w{ color:var(--gold-deep); }
.ch-empty{
    padding:14px 12px;
    font-size:12.5px; line-height:1.5; color:var(--ink-mute); font-style:italic;
}

.editor{
    background:var(--paper);
    border:var(--hairline);
    border-radius:16px;
    display:flex; flex-direction:column;
    /* Fixed height so .sheet scrolls inside the card rather than the card
       growing down the page — that keeps the footer and toolbar in view. */
    height:calc(100vh - 108px);
    min-height:520px;
    overflow:hidden;
}
.ed-head{ padding:24px 40px 18px; }
.ed-head h1{
    margin:0;
    font-size:24px; font-weight:800; letter-spacing:-.015em;
    color:var(--ink);
    overflow-wrap:anywhere;
}
.ed-head .meta{
    margin-top:6px;
    font-size:12.5px; color:var(--ink-mute);
    display:flex; align-items:center; gap:7px;
    flex-wrap:wrap;
}
.ed-head .meta .dot{ opacity:.5; }
.ed-head .meta .genre{ color:var(--gold-deep); font-weight:700; }
.ed-head .meta .status{ text-transform:capitalize; }

.toolbar{
    display:flex; align-items:center; gap:4px;
    padding:8px 40px;
    border-top:1px solid rgba(188,179,201,.35);
    border-bottom:1px solid rgba(188,179,201,.35);
    background:rgba(251,238,220,.35);
    flex-wrap:wrap;
}
.tsel{ position:relative; display:flex; align-items:center; margin-right:6px; }
.tsel select{
    appearance:none; -webkit-appearance:none;
    background:transparent; border:1px solid rgba(188,179,201,.55);
    border-radius:8px;
    padding:7px 30px 7px 11px;
    font:inherit; font-size:13px; font-weight:600;
    color:var(--ink); cursor:pointer;
    line-height:normal;
}
.tsel select:hover{ border-color:var(--gold-deep); }
.tsel i{ position:absolute; right:10px; font-size:11px; color:var(--ink-mute); pointer-events:none; }
.tsep{ width:1px; height:20px; background:rgba(188,179,201,.5); margin:0 6px; }
.tb{
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; border-radius:8px;
    color:var(--ink-soft); cursor:pointer;
    transition:background .12s, color .12s;
}
.tb i{ font-size:16px; }
.tb:hover{ background:var(--cream-deep); color:var(--ink); }
.tb.on{ background:rgba(236,174,87,.22); color:var(--gold-deep); }

/* The sheet. Quill's container/editor are re-skinned onto the design's .doc. */
.sheet{ flex:1; padding:44px 40px 60px; overflow-y:auto; }
.sheet .ql-container{
    font-family:inherit;
    font-size:16.5px;
    border:0;
    height:auto;
}
.sheet .ql-editor{
    max-width:660px; margin:0 auto;
    padding:0;
    outline:0;
    font-size:16.5px; line-height:1.75;
    color:var(--ink);
    overflow-y:visible;
}
.sheet .ql-editor.ql-blank::before{
    left:auto; right:auto;
    color:var(--ink-mute); font-style:italic;
    content:attr(data-placeholder);
}
.sheet .ql-editor h1{
    margin:0 0 28px;
    font-size:27px; font-weight:800; letter-spacing:-.015em;
    text-align:center;
    color:var(--ink);
    scroll-margin-top:120px;
}
.sheet .ql-editor h1:not(:first-child){ margin-top:52px; }
.sheet .ql-editor h2{ margin:34px 0 14px; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.sheet .ql-editor h3{ margin:28px 0 12px; font-size:16.5px; font-weight:700; letter-spacing:-.005em; }
.sheet .ql-editor p{ margin:0 0 1.35em; }
.sheet .ql-editor p:last-child{ margin-bottom:0; }
.sheet .ql-editor blockquote{
    margin:1.4em 0; padding:2px 0 2px 20px;
    border-left:3px solid var(--gold);
    color:var(--ink-soft); font-style:italic;
}
.sheet .ql-editor ul,
.sheet .ql-editor ol{ padding-left:1.4em; margin:0 0 1.35em; }
.sheet .ql-editor ::selection{ background:rgba(236,174,87,.32); }
.sheet .ql-editor .chapter-flash{
    background:rgba(236,174,87,.28);
    transition:background .3s ease;
    border-radius:6px;
}

.ed-foot{
    display:flex; align-items:center; gap:14px;
    padding:14px 40px;
    border-top:1px solid rgba(188,179,201,.35);
    background:rgba(251,238,220,.35);
    font-size:13px;
    flex-wrap:wrap;
}
.ed-foot .count{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.ed-foot .chars{ color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.ed-foot .sep{ color:var(--mist); }
.ed-foot .save-state{
    margin-left:auto;
    display:inline-flex; align-items:center; gap:7px;
    font-size:12px; font-weight:600;
    color:var(--ink-mute);
}
.ed-foot .save-state i{ font-size:14px; }
.ed-foot .save-state.saved{ color:var(--success); }
.ed-foot .save-state.saving{ color:var(--gold-deep); }
.ed-foot .save-state.saving i{ animation:spin 1s linear infinite; }
.ed-foot .save-state.error{ color:var(--danger); }
.ed-foot .manual-save{
    background:transparent; border:0; cursor:pointer;
    font:inherit; font-size:12px; font-weight:700;
    color:var(--ink-mute);
    padding:6px 8px; border-radius:8px;
    transition:color .12s, background .12s;
}
.ed-foot .manual-save:hover{ color:var(--ink); background:var(--cream-deep); }

.work .rail{ position:sticky; top:18px; display:flex; flex-direction:column; gap:16px; }
.work .rail .rail-body{ padding:18px; display:flex; flex-direction:column; gap:20px; }
.goal .top{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:10px; margin-bottom:9px;
}
.goal .lbl{ font-size:12px; font-weight:700; color:var(--ink-soft); }
.goal .pct{
    font-size:11px; font-weight:700;
    color:var(--gold-deep);
    font-variant-numeric:tabular-nums;
}
.goal .nums{
    margin-top:8px;
    font-size:12.5px; color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
}
.goal .nums b{ color:var(--ink); font-weight:800; }
.streak-line{
    display:flex; align-items:center; gap:9px;
    padding-top:16px;
    border-top:1px solid rgba(188,179,201,.35);
    font-size:12.5px; color:var(--ink-mute);
}
.streak-line i{ font-size:16px; color:var(--gold-deep); }
.streak-line b{ color:var(--ink); font-weight:800; }

.stuck-copy{ font-size:13px; line-height:1.5; color:var(--ink-mute); margin:0 0 14px; }
.work .rail .flat-btn{ width:100%; height:auto; padding:11px 16px; background:var(--cream); border-color:rgba(198,138,46,.45); }
.work .rail .flat-btn:hover{ background:var(--cream-deep); border-color:var(--gold-deep); color:var(--ink); }
.prompt-out{
    position:relative;                /* anchors the dismiss button */
    margin-top:14px;
    padding:14px 34px 14px 16px;
    background:var(--cream);
    border:1px solid rgba(188,179,201,.5);
    border-radius:12px;
    font-size:13.5px; line-height:1.55;
    color:var(--ink-soft);
    font-style:italic;
}
.prompt-out[hidden]{ display:none; }

body.focus .chapters,
body.focus .site-foot,
body.focus .work .rail{ display:none; }
body.focus .work{ grid-template-columns:minmax(0,1fr); max-width:1000px; }
body.focus .toolbar{ opacity:.35; transition:opacity .2s; }
body.focus .toolbar:hover{ opacity:1; }

/* ==========================================================================
   Onboarding wizard — the first-run flow over the dashboard
   --------------------------------------------------------------------------
   Not a modal: no backdrop to click away, no Escape. It owns the viewport
   until the writer finishes it or takes the Skip that records the decision.
   ========================================================================== */

.wizard{
    position:fixed; inset:0; z-index:1060;
    display:flex; align-items:center; justify-content:center;
    padding:32px 24px;
    overflow-y:auto;
    /* Opaque: the empty dashboard behind it is exactly what the wizard is
       here to fill in, so it is covered rather than teased. */
    background:
        radial-gradient(ellipse 80% 50% at 80% 0%, rgba(236,174,87,.16) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(188,179,201,.2) 0%, transparent 60%),
        var(--linen);
}
.wizard[hidden]{ display:none; }

.wizard-shell{
    position:relative;
    width:100%; max-width:760px;
    margin:auto;
    display:flex; flex-direction:column;
    background:var(--paper);
    border:1px solid rgba(188,179,201,.5);
    border-radius:24px;
    padding:28px 34px 30px;
    box-shadow:var(--shadow-modal);
    animation:panelIn 240ms cubic-bezier(0.34,1.3,0.64,1) both;
}

.wizard-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; flex-wrap:wrap;
    padding-bottom:18px; margin-bottom:24px;
    border-bottom:1px dashed rgba(188,179,201,.55);
}
.wizard-brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.wizard-brand .mark{ width:38px; height:38px; object-fit:contain; display:block; }
.wizard-brand .wordmark{
    font-family:"Germania One", serif;
    font-size:26px; line-height:1;
    color:var(--ink); letter-spacing:.005em;
}

/* Progress rail. Steps behind the current one stay gold and checked, so the
   writer can see how much of this is already done. */
.wizard-rail{
    display:flex; align-items:center; gap:8px;
    list-style:none; margin:0; padding:0;
    flex:0 1 auto; min-width:0;
}
.wizard-rail li{
    display:flex; align-items:center; gap:8px;
    min-width:0;
}
.wizard-rail li + li::before{
    content:""; flex:0 0 auto;
    width:22px; height:2px; margin-right:8px;
    background:var(--mist); opacity:.7;
    transition:background .2s;
}
.wizard-rail li.done + li::before{ background:var(--gold); opacity:1; }
.wizard-rail .pip{
    width:30px; height:30px; flex:0 0 auto;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--cream);
    border:1.5px solid var(--mist);
    color:var(--ink-mute); font-size:15px;
    transition:background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.wizard-rail .lbl{
    font-size:11px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-mute);
    white-space:nowrap;
    transition:color .2s;
}
.wizard-rail li.on .pip{
    background:var(--gold); border-color:var(--gold-deep); color:var(--ink);
    box-shadow:0 0 0 4px rgba(236,174,87,.22);
}
.wizard-rail li.on .lbl{ color:var(--ink); }
.wizard-rail li.done .pip{
    background:var(--success); border-color:var(--success); color:var(--paper);
}
.wizard-rail li.done .lbl{ color:var(--ink-soft); }

.wizard-body{ min-height:340px; }
.wizard-step[hidden]{ display:none; }
.wizard-step{ animation:panelIn 200ms ease-out both; }

.wizard-title{
    display:flex; align-items:center; gap:12px;
    margin-bottom:10px;
}
.wizard-title .gem{
    width:14px; height:14px; flex:0 0 auto;
    background:var(--gold);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.wizard-title h2{
    margin:0; font-size:23px; font-weight:700;
    letter-spacing:-.01em; color:var(--ink);
}
.wizard-lede{
    margin:0 0 22px;
    font-size:14.5px; line-height:1.55; color:var(--ink-soft);
    max-width:62ch;
}

/* Welcome — what the next three screens are going to ask for. */
.wizard-preview{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:14px;
}
.wizard-preview li{
    display:flex; align-items:flex-start; gap:14px;
    padding:16px 18px;
    background:var(--cream);
    border:1px solid rgba(188,179,201,.55);
    border-radius:16px;
}
.wizard-preview .ico{
    width:40px; height:40px; flex:0 0 auto;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper);
    border:1.5px solid var(--gold);
    color:var(--gold-deep); font-size:20px;
}
.wizard-preview .txt{
    display:flex; flex-direction:column; gap:3px;
    font-size:13.5px; line-height:1.5; color:var(--ink-soft);
}
.wizard-preview .txt b{ font-size:15px; font-weight:700; color:var(--ink); }

/* The pen name sits above the avatar editor: one step, one identity. */
.wizard-name{ margin-bottom:24px; max-width:420px; }

/* The trait rows are hidden until their host is on screen. The modal rule
   keys off .modal.show; the wizard needs its own, or every row sits at the
   opacity:0 the animation starts from. */
.wizard .traits .trait{ animation:rowIn 200ms ease-out both; }

/* In-field action button — the search arrow. Same shape as the password
   reveal, without borrowing a name that means something else. */
.f-ctl .in-btn{
    background:transparent; border:0; padding:0; cursor:pointer;
    color:var(--ink-mute); font-size:18px; flex:0 0 auto;
    display:flex; align-items:center;
    transition:color .12s;
}
.f-ctl .in-btn:hover{ color:var(--gold-deep); }

.wizard-note{
    display:flex; align-items:center; gap:10px;
    margin-top:18px;
    padding:12px 16px;
    background:rgba(63,122,94,.09);
    border:1px solid rgba(63,122,94,.3);
    border-radius:14px;
    font-size:13.5px; color:var(--ink-soft);
}
.wizard-note[hidden]{ display:none; }
.wizard-note > i{ font-size:18px; color:var(--success); flex:0 0 auto; }

/* A hit that has already been invited stops offering the button. */
.search-hit .sent{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--success);
    flex:0 0 auto;
}

/* Done */
.wizard-done{ text-align:center; padding-top:8px; }
.wizard-done .done-ring{ width:132px; height:132px; margin:12px auto 22px; }
.wizard-done h2{
    margin:0 0 8px;
    font-size:27px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
}
.wizard-done .wizard-lede{ margin-left:auto; margin-right:auto; }
.wizard-tally{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:10px;
    max-width:420px; margin-inline:auto;
    text-align:left;
}
.wizard-tally li{
    display:flex; align-items:center; gap:12px;
    padding:12px 16px;
    background:var(--cream);
    border:1px solid rgba(188,179,201,.55);
    border-radius:14px;
    font-size:13.5px; color:var(--ink-soft);
}
.wizard-tally li b{ color:var(--ink); font-weight:700; }
.wizard-tally .ico{
    width:30px; height:30px; flex:0 0 auto;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--success); color:var(--paper); font-size:14px;
}
.wizard-tally li.skipped .ico{ background:var(--mist); color:var(--ink-soft); }

.wizard-foot{
    display:flex; align-items:center; gap:12px;
    /* Right-aligned, with Skip pushed back out to the left when it is there.
       On the tally step Skip is gone, and the forged button must not slide
       over to where Skip used to be. */
    justify-content:flex-end;
    padding-top:22px; margin-top:24px;
    border-top:1px dashed rgba(188,179,201,.55);
}
.wizard-foot #wizardSkipBtn{ margin-right:auto; }
.wizard-foot .text-btn{ display:inline-flex; align-items:center; gap:6px; }
/* The rule above outranks the UA's [hidden]{display:none}, so both footer
   buttons need their hidden state spelled out or neither ever goes away. */
.wizard-foot .text-btn[hidden]{ display:none; }

/* ==========================================================================
   Auth — login, signup
   ========================================================================== */

body.auth{
    display:flex; align-items:center; justify-content:center;
    padding:40px 24px;
    min-height:100vh;
}
.auth-page{
    position:relative; z-index:1;
    width:100%; max-width:460px;
    display:flex; flex-direction:column; align-items:center;
    gap:32px;
}
.auth-page.wide{ max-width:500px; }

.brand-block{
    display:flex; flex-direction:column; align-items:center;
    gap:14px; text-align:center;
}
.brand-block .mark-wrap{
    position:relative;
    width:108px; height:108px;
    isolation:isolate;
    overflow:visible;
}
.brand-block .mark{
    width:108px; height:108px;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 8px 14px rgba(50,44,60,.18));
    position:relative;
    z-index:1;
}
/* Warm light from the forge's hot port, masked to the forge silhouette so
   no halo bleeds onto the paper. */
.forge-glow{
    position:absolute;
    left:38%; top:87%;
    width:170px; height:170px;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle,
        rgba(255,180,60,.48) 0%,
        rgba(255,160,50,.36) 14%,
        rgba(255,140,40,.22) 30%,
        rgba(255,150,55,.09) 50%,
        transparent 70%);
    -webkit-mask-image:url("../images/brand/logo-mark.png");
            mask-image:url("../images/brand/logo-mark.png");
    -webkit-mask-size:97px 108px;
            mask-size:97px 108px;
    -webkit-mask-position:49.5px -9px;
            mask-position:49.5px -9px;
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    pointer-events:none;
    mix-blend-mode:plus-lighter;
    z-index:2;
    opacity:var(--flicker, .85);
    transition:opacity 50ms ease-out;
}
.mark-wrap .spark{ z-index:3; }

.brand-block .wordmark{
    font-family:"Germania One", serif;
    font-size:54px; line-height:.9;
    color:var(--ink);
    margin:0;
    letter-spacing:.005em;
    position:relative;
    isolation:isolate;
    font-weight:400;
}
/* Firelight pooling on the tops of the letters — the forge sits below.
   Reads the same --flicker as the glow so the two pulse in lockstep. */
.brand-block .wordmark::after{
    content:"WrimoForge";
    position:absolute; inset:0;
    font:inherit; letter-spacing:inherit; line-height:inherit;
    text-align:center;
    background:linear-gradient(180deg,
        rgba(255,160,55,.34) 0%,
        rgba(255,160,55,.34) 20%,
        transparent 60%);
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
            color:transparent;
    pointer-events:none;
    mix-blend-mode:plus-lighter;
    opacity:var(--flicker, .8);
    transition:opacity 50ms ease-out;
}
.brand-block .tagline{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-top:-2px;
    font-size:14px; font-weight:500;
    color:var(--ink-soft); letter-spacing:.01em;
}
.brand-block .tagline .line{ width:36px; height:1px; background:var(--gold); opacity:.55; }
.brand-block .tagline .star{ color:var(--gold); font-size:12px; }

.auth-card{
    position:relative;
    width:100%;
    background:var(--paper);
    border:1px solid rgba(188,179,201,.5);
    border-radius:24px;
    padding:36px 40px 40px;
    box-shadow:
        0 1px 0 rgba(50,44,60,.04),
        0 28px 56px -32px rgba(50,44,60,.22);
}
.auth-card .card-head{
    display:block;
    text-align:center;
    padding:0; margin-bottom:28px;
    border-bottom:0;                 /* not the Friends card head */
}
.auth-card .card-head h2{
    margin:0;
    font-weight:700;
    font-size:24px; line-height:1.1;
    color:var(--ink); letter-spacing:-.01em;
}
.auth-card .f-ctl{ height:54px; padding:0 18px; }
.options-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px;
    margin-top:4px;
    font-size:13px;
}
.options-row.centered{ justify-content:center; margin-top:16px; }
/* A link, or a button dressed as one (the reset page's "start over") */
.forgot{
    color:var(--gold-deep); font-weight:600;
    text-decoration:none;
    background:none; border:0; padding:0;
    font:inherit; font-weight:600; cursor:pointer;
}
.forgot:hover{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); }
/* Neutral counterpart to .f-error: something the writer should know, not a fault */
.f-note{
    display:flex; align-items:flex-start; gap:9px;
    padding:12px 15px;
    background:rgba(236,174,87,.12);
    border:1px solid rgba(198,138,46,.35);
    border-radius:12px;
    color:var(--ink-soft);
    font-size:13.5px;
    line-height:1.45;
}
.f-note i{ font-size:17px; flex:0 0 auto; color:var(--gold-deep); margin-top:1px; }
.f-note a{ color:var(--gold-deep); font-weight:700; }
.f-note[hidden]{ display:none; }
.cta-row{ margin-top:24px; display:flex; justify-content:center; }
.cta-row .wf-btn{ width:100%; }
.auth-alt{ text-align:center; font-size:14px; color:var(--ink-soft); }
.auth-alt a{
    color:var(--gold-deep); font-weight:700;
    text-decoration:none;
    letter-spacing:.01em;
}
.auth-alt a:hover{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); }

/* ==========================================================================
   Admin — the contact queue
   --------------------------------------------------------------------------
   Only rendered for an admin account; see partials/admin-section.php.
   ========================================================================== */

/* Segmented Open / All control. */
.admin-filter{
    display:flex; align-items:center; gap:0;
    flex:0 0 auto;
    padding:4px;
    background:var(--cream);
    border:1.5px solid var(--mist);
    border-radius:12px;
}
.admin-filter .seg{
    padding:8px 18px;
    background:transparent; border:0; border-radius:9px;
    font:inherit; font-size:12px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-mute); cursor:pointer;
    transition:color .12s, background .12s;
}
.admin-filter .seg:hover{ color:var(--ink); }
.admin-filter .seg.on{
    background:var(--paper);
    color:var(--ink);
    box-shadow:0 1px 3px rgba(50,44,60,.12);
}

/* Waiting count on the tab itself, so a full queue shows from any screen. */
.nav-link .tab-count{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:19px; height:19px;
    margin-left:2px; padding:0 6px;
    border-radius:999px;
    background:var(--gold); color:var(--ink);
    font-size:11px; font-weight:800; line-height:1;
    font-variant-numeric:tabular-nums;
}
.nav-link .tab-count[hidden]{ display:none; }

.msg-list{ display:flex; flex-direction:column; gap:16px; }

.msg{
    background:var(--paper);
    border:var(--hairline);
    border-radius:18px;
    padding:20px 22px 18px;
    box-shadow:var(--shadow-card);
    transition:box-shadow .15s, border-color .15s, opacity .2s, transform .2s;
}
.msg:hover{ box-shadow:var(--shadow-card-hover); }
/* Answered mail recedes rather than disappearing - the All view is a record. */
.msg.handled{ background:var(--cream); box-shadow:none; }
.msg.handled .msg-body{ color:var(--ink-mute); }

.msg-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px; flex-wrap:wrap;
    padding-bottom:14px; margin-bottom:14px;
    border-bottom:1px dashed rgba(188,179,201,.55);
}
.msg .who{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.msg .who .nm{ font-size:16px; font-weight:700; letter-spacing:-.005em; color:var(--ink); }
.msg .who .em{
    font-size:13px; color:var(--gold-deep); font-weight:600;
    text-decoration:none;
    overflow-wrap:anywhere;
}
.msg .who .em:hover{ color:var(--ink); text-decoration:underline; }

.msg .chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.msg .chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 11px;
    background:var(--cream);
    border:1px solid rgba(188,179,201,.55);
    border-radius:999px;
    font-size:11px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-mute);
    white-space:nowrap;
}
.msg .chip i{ font-size:12px; }
.msg.handled .chip{ background:var(--paper); }
/* Deletion, data and security requests are the ones with a clock on them. */
.msg .chip.topic.urgent{
    background:rgba(236,174,87,.18);
    border-color:rgba(198,138,46,.45);
    color:var(--gold-deep);
}

.msg-body{
    /* The text is stored exactly as it was typed, so the line breaks the
       sender made are honoured here rather than rebuilt as markup. */
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:14.5px; line-height:1.65; color:var(--ink-soft);
}

.msg-foot{
    display:flex; align-items:center; justify-content:flex-end; gap:14px;
    margin-top:16px;
}
.msg-foot .done{
    display:inline-flex; align-items:center; gap:7px;
    margin-right:auto;
    font-size:12px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--success);
}

@media (max-width:640px){
    .msg{ padding:18px 18px 16px; }
    .msg-head{ flex-direction:column; gap:10px; }
    .admin-filter .seg{ padding:8px 14px; }
}

/* ==========================================================================
   Marketing — the public home page and the privacy policy
   --------------------------------------------------------------------------
   Ported from ref/design_handoff_wrimoforge/designs/Home.html.
   Everything here hangs off body.marketing so a name like .section or .row
   cannot reach into the app, which has its own meaning for both.
   ========================================================================== */

/* Anchor jumps on the marketing pages glide; the reduced-motion block at the
   end of this sheet turns every transition off, but scroll-behavior is not a
   transition, so it is opted out of here as well. */
html:has(body.marketing){ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
    html:has(body.marketing){ scroll-behavior:auto; }
}

.site-head{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px;
    padding:16px 48px;
    background:rgba(254,253,251,.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:var(--hairline);
}
.site-head .brand{ gap:12px; color:inherit; }
.site-head .brand .mark{ width:40px; height:40px; }
.site-head .brand .wordmark{
    font-family:"Germania One", serif;
    font-size:27px; line-height:1;
    letter-spacing:.005em; color:var(--ink);
}
.head-links{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.head-links a.quiet{
    padding:10px 16px;
    font-size:14px; font-weight:600;
    color:var(--ink-mute); text-decoration:none;
    border-radius:10px;
    transition:color .12s, background .12s;
}
.head-links a.quiet:hover{ color:var(--ink); background:rgba(188,179,201,.18); }

.wrap{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 48px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero{
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    padding:78px 0 68px;
}
/* The login screen's forge fire at hero scale. The mark renders 135x150
   inside a 150px wrap, so the glow's mask has to be re-registered to match -
   the numbers are geometry, not taste. */
.hero .mark-wrap{
    position:relative;
    width:150px; height:150px;
    isolation:isolate; overflow:visible;
    margin-bottom:20px;
}
.hero .mark-wrap .mark{
    width:150px; height:150px;
    display:block; object-fit:contain;
    filter:drop-shadow(0 10px 18px rgba(50,44,60,.18));
    position:relative; z-index:1;
}
.hero .forge-glow{
    width:236px; height:236px;
    -webkit-mask-size:135px 150px;
            mask-size:135px 150px;
    -webkit-mask-position:68.5px -12.5px;
            mask-position:68.5px -12.5px;
}
.hero .wordmark{
    position:relative; isolation:isolate;
    margin:0;
    font-family:"Germania One", serif;
    font-size:68px; line-height:.92;
    letter-spacing:.005em;
    color:var(--ink); font-weight:400;
}
/* Firelight pooling on the tops of the letters; reads the same --flicker as
   the glow, so the two pulse in lockstep. */
.hero .wordmark::after{
    content:"WrimoForge";
    position:absolute; inset:0;
    font:inherit; letter-spacing:inherit; line-height:inherit;
    text-align:center;
    background:linear-gradient(180deg,
        rgba(255,160,55,.34) 0%,
        rgba(255,160,55,.34) 20%,
        transparent 60%);
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
            color:transparent;
    pointer-events:none;
    mix-blend-mode:plus-lighter;
    opacity:var(--flicker, .8);
    transition:opacity 50ms ease-out;
}
.hero .tagline{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-top:14px;
    font-size:14px; font-weight:600;
    letter-spacing:.02em; color:var(--ink-soft);
}
.hero .tagline .line{ width:40px; height:1px; background:var(--gold); opacity:.55; }
.hero .tagline .pip{ color:var(--gold); font-size:12px; }
.hero h1{
    margin:34px 0 0;
    max-width:740px;
    font-size:52px; font-weight:800; letter-spacing:-.025em;
    line-height:1.08;
    text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:var(--gold-deep); }
.hero .lede{
    margin:20px 0 0;
    max-width:600px;
    font-size:17.5px; line-height:1.6;
    color:var(--ink-soft);
    text-wrap:pretty;
}
body.marketing .cta-row{
    display:flex; align-items:center; justify-content:center; gap:18px;
    margin-top:36px; flex-wrap:wrap;
}
body.marketing .cta-row .wf-btn{ width:auto; }
.hero .reassure{
    margin-top:16px;
    font-size:13px; color:var(--ink-mute);
    display:flex; align-items:center; gap:7px;
}
.hero .reassure i{ font-size:15px; color:var(--gold-deep); }

/* The in-app rule lightens only. Out here the button is the whole point of
   the page, so it earns an ember glow on hover. */
body.marketing .wf-btn:hover{
    filter:brightness(1.06)
           drop-shadow(0 4px 14px rgba(236,174,87,.45))
           drop-shadow(0 0 22px rgba(255,160,55,.28));
}

.ghost-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:15.5px; font-weight:700;
    color:var(--ink-soft); text-decoration:none;
    padding:12px 4px;
    transition:color .12s;
}
.ghost-link i{ font-size:16px; transition:transform .14s; }
.ghost-link:hover{ color:var(--ink); }
.ghost-link:hover i{ transform:translateX(3px); }

/* ── Section scaffolding ──────────────────────────────────────────────── */

body.marketing .section{ padding:56px 0; }
body.marketing .section.tight{ padding-top:24px; }
.section-head{ text-align:center; margin-bottom:36px; }
.section-head .eyebrow{ justify-content:center; margin-bottom:12px; letter-spacing:.2em; }
.section-head h2{
    margin:0;
    font-size:32px; font-weight:800; letter-spacing:-.02em;
    text-wrap:balance;
}
.section-head p{
    margin:12px auto 0; max-width:560px;
    font-size:16px; line-height:1.6; color:var(--ink-soft);
    text-wrap:pretty;
}

/* ── Feature cards ────────────────────────────────────────────────────── */

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(268px, 1fr));
    gap:22px;
}
.feature{
    background:var(--paper);
    border:var(--hairline);
    border-radius:20px;
    padding:28px 26px 26px;
    box-shadow:var(--shadow-card);
    transition:box-shadow .15s, border-color .15s;
}
/* Shadow and border only. Cards in this system never lift. */
.feature:hover{
    border-color:rgba(198,138,46,.5);
    box-shadow:var(--shadow-card-hover);
}
.feature .icon{
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(236,174,87,.16);
    border-radius:13px;
    color:var(--gold-deep);
    margin-bottom:16px;
}
.feature .icon i{ font-size:23px; }
.feature h3{ margin:0 0 8px; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.feature p{
    margin:0;
    font-size:14.5px; line-height:1.6; color:var(--ink-soft);
    text-wrap:pretty;
}

/* ── Shelf preview ────────────────────────────────────────────────────── */

.preview{
    background:var(--paper);
    border:var(--hairline);
    border-radius:22px;
    padding:26px;
    box-shadow:0 1px 0 rgba(50,44,60,.04), 0 22px 44px -28px rgba(50,44,60,.26);
}
.preview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(232px, 1fr));
    gap:18px;
}
.mini-novel{
    border:var(--hairline);
    border-radius:16px;
    overflow:hidden;
    background:var(--paper);
}
.mini-cover{ position:relative; height:104px; overflow:hidden; }
.mini-cover::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.2) 100%);
}
.mini-cover .t{
    position:absolute; left:14px; right:14px; bottom:11px; z-index:1;
    font-size:15.5px; font-weight:800; letter-spacing:-.01em;
    line-height:1.15; color:#FFF8E7;
    text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.mini-body{ padding:13px 14px 15px; }
.mini-body .row{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:8px; margin-bottom:7px;
    font-size:11.5px;
}
.mini-body .row b{
    font-size:14px; font-weight:800; color:var(--ink);
    font-variant-numeric:tabular-nums;
}
.mini-body .row .of{ color:var(--ink-mute); font-weight:500; }
.mini-body .row .pct{ color:var(--gold-deep); font-weight:700; font-variant-numeric:tabular-nums; }
.mini-body .bar{ height:14px; }
.mini-body .bar .bar-fill{ height:14px; }

/* ── How it works ─────────────────────────────────────────────────────── */

.steps{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(236px, 1fr));
    gap:24px;
}
.step{ text-align:center; padding:0 8px; }
.step .num{
    position:relative; isolation:isolate;
    width:54px; height:60px; margin:0 auto 16px;
    display:flex; align-items:center; justify-content:center;
    font-size:21px; font-weight:800; color:var(--ink);
}
.step .num::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--gold);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    opacity:.9;
}
.step h3{ margin:0 0 8px; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.step p{
    margin:0;
    font-size:14.5px; line-height:1.6; color:var(--ink-soft);
    text-wrap:pretty;
}

/* ── Closing CTA ──────────────────────────────────────────────────────── */

.final{
    position:relative;
    background:var(--cream);
    border:1px solid rgba(198,138,46,.4);
    border-radius:24px;
    padding:52px 40px 56px;
    text-align:center;
    overflow:hidden;
    box-shadow:0 1px 0 rgba(50,44,60,.04), 0 22px 44px -30px rgba(50,44,60,.26);
}
.final::before{
    content:""; position:absolute;
    right:-70px; top:-70px;
    width:260px; height:260px;
    background:radial-gradient(circle, rgba(236,174,87,.28) 0%, transparent 68%);
    pointer-events:none;
}
.final h2{
    position:relative;
    margin:0 auto; max-width:560px;
    font-size:34px; font-weight:800; letter-spacing:-.022em;
    line-height:1.12;
    text-wrap:balance;
}
.final p{
    position:relative;
    margin:14px auto 0; max-width:500px;
    font-size:16px; line-height:1.6; color:var(--ink-soft);
    text-wrap:pretty;
}

/* ── Policy prose ─────────────────────────────────────────────────────── */

.policy{
    position:relative; z-index:1;
    max-width:760px; margin:0 auto;
    padding:48px 0 24px;
}
.policy .policy-head{ text-align:left; margin-bottom:30px; }
.policy h1{
    margin:0;
    font-size:38px; font-weight:800; letter-spacing:-.02em;
    text-wrap:balance;
}
.policy .updated{
    margin-top:10px;
    font-size:13px; color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
}
.policy .panel{
    background:var(--paper);
    border:var(--hairline);
    border-radius:20px;
    padding:30px 34px 34px;
    box-shadow:var(--shadow-card);
}
.policy .panel + .panel{ margin-top:20px; }
.policy h2{
    margin:0 0 12px;
    font-size:20px; font-weight:700; letter-spacing:-.01em;
    display:flex; align-items:center; gap:11px;
}
.policy h2 .gem{ flex:0 0 auto; }
.policy h3{
    margin:22px 0 8px;
    font-size:15px; font-weight:700; letter-spacing:-.005em;
}
.policy p{ margin:0 0 12px; font-size:15px; line-height:1.65; color:var(--ink-soft); }
/* Prose links. The sheet styles links per component elsewhere, and this is the
   only page with links running through body copy. */
.policy a{
    color:var(--gold-deep); font-weight:700;
    text-decoration:underline; text-decoration-color:rgba(198,138,46,.4);
    text-underline-offset:2px;
    transition:color .12s, text-decoration-color .12s;
}
.policy a:hover{ color:var(--ink); text-decoration-color:var(--gold); }
.policy p:last-child{ margin-bottom:0; }
.policy ul{ margin:0 0 12px; padding-left:0; list-style:none; }
.policy ul li{
    position:relative;
    padding-left:22px; margin-bottom:9px;
    font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.policy ul li::before{
    content:""; position:absolute; left:2px; top:.62em;
    width:8px; height:8px;
    background:var(--gold);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.policy ul li b{ color:var(--ink); font-weight:700; }
/* ── Pricing ──────────────────────────────────────────────────────────── */

.pricing{ max-width:900px; }
.plan-toggle{
    display:inline-flex; gap:4px;
    padding:4px; margin:0 0 22px;
    background:var(--paper);
    border:var(--hairline);
    border-radius:999px;
}
.plan-toggle button{
    border:0; background:transparent; cursor:pointer;
    padding:8px 18px; border-radius:999px;
    font:inherit; font-size:14px; font-weight:700; color:var(--ink-soft);
}
.plan-toggle button.on{ background:var(--gold); color:var(--ink); }
.plans{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px; align-items:stretch;
}
.policy .plans .panel + .panel{ margin-top:0; }
.plan{ display:flex; flex-direction:column; }
.plan.premium{ border:2px solid var(--gold); }
.plan .price{ margin:4px 0 18px; }
.plan .price[hidden]{ display:none; }
.plan .price .amount{ font-size:36px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.plan .price .per{ font-size:14px; color:var(--ink-mute); }
.plan ul{ flex:1 1 auto; }
.plan-cta{ margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.policy a.wf-btn,
.policy a.wf-btn:hover{ color:#FFFFFF; font-weight:800; text-decoration:none; }
.plan-cta .current{
    font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-mute);
}
.plan .f-error{ margin-top:14px; }
.plans-note{ margin-top:22px !important; font-size:13.5px !important; text-align:center; }
@media (max-width: 720px){
    .plans{ grid-template-columns:minmax(0, 1fr); }
}

/* Plan card on the Profile tab */
.plan-line{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-soft); }
#planCard .head .gold-pill{ margin-left:auto; }
#planCard .f-note,
#planCard .f-error{ margin-top:14px; }
#planCard .form-foot a.wf-btn{ text-decoration:none; }
#planCard .form-foot .wf-btn[hidden]{ display:none; }

/* Delete account: two steps, the second revealed by the first */
#deleteCard [hidden]{ display:none; }
#deleteCard #deleteConfirmBox{ margin-top:18px; }
#deleteCard .form-foot{ margin-top:14px; }
.f-note.farewell{ max-width:520px; margin:0 auto 24px; text-align:left; }


/* ── Contact form ─────────────────────────────────────────────────────── */

/* The field shell is a fixed-height row everywhere else; a message box has to
   grow, so this variant drops the height and lets the textarea set it. */
.f-ctl.area{
    height:auto; align-items:stretch;
    padding:14px 16px;
    border-radius:14px;
}
.f-ctl.area textarea{
    width:100%;
    min-height:132px;
    resize:vertical;
    line-height:1.55;
    font-family:inherit;
}

/* The honeypot. Off screen rather than display:none - some bots skip hidden
   inputs, and a field they can see in the DOM is the point. */
.f-trap{
    position:absolute !important;
    left:-9999px; top:auto;
    width:1px; height:1px;
    overflow:hidden;
}

.contact-page .form-foot{
    display:flex; justify-content:flex-end;
    margin-top:26px;
}
.contact-sent{ text-align:center; padding:22px 0 8px; }
.contact-sent[hidden]{ display:none; }
.contact-sent .tick{
    width:56px; height:56px; margin:0 auto 18px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--success); color:var(--paper); font-size:24px;
}
.contact-sent h2{
    /* .policy h2 is a flex row for its gem; this one is centred prose. */
    display:block;
    margin:0 0 8px;
    font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
}
.contact-sent p{
    margin:0 auto 18px; max-width:420px;
    font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.policy-aside{
    margin:20px 0 0;
    font-size:13.5px; color:var(--ink-mute);
}

.policy .lede{
    font-size:16.5px; line-height:1.6; color:var(--ink-soft);
    margin-bottom:22px;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-foot{
    position:relative; z-index:1;
    margin-top:56px;
    border-top:var(--hairline);
    padding:26px 48px 40px;
}
.foot-inner{
    max-width:1120px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:18px; flex-wrap:wrap;
}
.foot-brand{
    display:flex; align-items:center; gap:10px;
    font-family:"Germania One", serif;
    font-size:20px; color:var(--ink);
    text-decoration:none;
}
.foot-brand img{ width:28px; height:28px; object-fit:contain; }
.foot-links{ display:flex; align-items:center; gap:20px; }
.foot-links a{
    font-size:13.5px; font-weight:600;
    color:var(--ink-mute); text-decoration:none;
    transition:color .12s;
}
.foot-links a:hover{ color:var(--ink); }
.foot-note{
    display:flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
}
.foot-note .sep{ opacity:.6; }

/* Inside the app the header already carries the brand; a second wordmark
   below the fold would read as a second site. */
.site-foot.compact{
    margin-top:0;
    padding:20px 48px 28px;
    background:transparent;
}
.site-foot.compact .foot-inner{
    max-width:1300px;
    justify-content:center; gap:14px;
}

/* ── Scroll reveal ────────────────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{
    opacity:1; transform:translateY(0);
    transition:opacity .5s ease-out, transform .5s cubic-bezier(.2,.7,.3,1);
}
/* Without JS - or with motion turned down - nothing may stay invisible. */
@media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
    .work{ grid-template-columns:minmax(0,1fr) 292px; }
    .chapters{ display:none; }
}
@media (max-width:980px){
    .friends-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:900px){
    .profile-grid{ grid-template-columns:1fr; }
    .char-card{ position:static; }
}
@media (max-width:880px){
    .work{ grid-template-columns:minmax(0,1fr); }
    /* The handoff hides the rail here. Keeping it - unstuck, below the sheet -
       is what keeps the goals panel and Get Unstuck reachable on a phone;
       focus mode still hides it, as it does at every width. */
    .work .rail{ position:static; }
    .editor{ height:auto; min-height:auto; }
    .sheet{ overflow:visible; }
    .ed-head, .toolbar, .ed-foot{ padding-left:22px; padding-right:22px; }
    .sheet{ padding:32px 22px 44px; }
}
@media (max-width:760px){
    .roster .row{ grid-template-columns:28px 46px minmax(0,1fr); row-gap:12px; }
    .roster .row .prog,
    .roster .row .row-actions{ grid-column:2 / -1; }
    .roster .row .row-actions{ justify-content:flex-start; }
}
@media (max-width:720px){
    .header{
        padding:16px 20px;
        flex-wrap:wrap; gap:12px;
        justify-content:space-between;
    }
    /* The tab strip scrolls sideways on a phone. The <nav> needs min-width:0
       or it grows to its content width as a flex item and drags the whole
       header wider than the viewport. */
    .header > nav{
        order:3;
        width:100%;
        min-width:0;
    }
    .header .nav-tabs{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding-bottom:2px;
    }
    .header .nav-tabs::-webkit-scrollbar{ display:none; }
    .brand .wordmark{ font-size:24px; }
    .brand .mark{ width:38px; height:38px; }
    .page{ padding:32px 20px 72px; }
    .page-head h1{ font-size:27px; }
    .modal-content{ padding:24px 22px 26px; }
    .form-card{ padding:24px 22px; }
    .char-card{ padding:28px 22px 24px; }
    .topbar{ padding:14px 18px; }
    .work{ padding:0 18px 48px; }
    .card-head{ padding:18px 20px 14px; }
    .card-body{ padding:18px 20px 22px; }
    .roster .row{ padding:14px 20px; }
    .auth-card{ padding:28px 24px 32px; }
    .brand-block .wordmark{ font-size:44px; }
}
@media (max-width:700px){
    .traits{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
    .avatar-editor{ grid-template-columns:minmax(0,1fr); justify-items:center; }
    .preview-col{ position:static; }
}
@media (max-width:520px){
    .f-pair{ grid-template-columns:minmax(0,1fr); }
    .grid{ grid-template-columns:minmax(0,1fr); }
    .badge-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width:720px){
    .wizard{ padding:0; }
    .wizard-shell{
        min-height:100vh;
        border-radius:0; border-left:0; border-right:0;
        padding:22px 20px 24px;
    }
    .wizard-head{ gap:14px; }
    /* The rail keeps its pips but drops the words: three labels plus the
       brand will not fit a phone header without wrapping into a second row
       that pushes the first question below the fold. */
    .wizard-rail .lbl{ display:none; }
    .wizard-rail li + li::before{ width:14px; margin-right:0; }
    .wizard-body{ min-height:0; }
    .wizard-title h2{ font-size:20px; }
    .wizard-done .done-ring{ width:112px; height:112px; }
}
@media (max-width:420px){
    /* Back and Next still fit; Skip moves under them rather than squeezing
       the forged button below its border-image caps. */
    .wizard-foot{ flex-wrap:wrap; justify-content:flex-end; }
    .wizard-foot #wizardSkipBtn{ order:3; width:100%; margin-right:0; text-align:center; }
}

@media (max-width:720px){
    .site-head{ padding:14px 20px; }
    .head-links a.quiet.hide-sm{ display:none; }
    .wrap{ padding:0 20px; }
    .hero{ padding:54px 0 48px; }
    .hero .wordmark{ font-size:50px; }
    .hero h1{ font-size:36px; }
    .hero .lede{ font-size:16px; }
    .section-head h2{ font-size:26px; }
    .final{ padding:40px 24px 44px; }
    .final h2{ font-size:27px; }
    .policy{ padding:32px 20px 16px; }
    .policy h1{ font-size:30px; }
    .policy .panel{ padding:24px 22px 26px; }
    .site-foot{ padding:24px 20px 36px; }
    .site-foot.compact{ padding:16px 20px 28px; }
    /* Three columns of footer stacked and centred, rather than one long row
       that wraps into ragged halves. */
    .foot-inner{ flex-direction:column; justify-content:center; text-align:center; }
    .foot-note{ flex-wrap:wrap; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
    *, *::before, *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}