/* MISALIGNMENT v4 — Flow Canvas
   A card-light, content-first art direction derived from the offset lines in the mark. */

:root{
  --v4-radius-canvas:44px;
  --v4-radius-dock:24px;
  --v4-shadow-dock:0 16px 45px rgba(26,56,66,.12),0 2px 10px rgba(26,56,66,.06);
  --v4-flow:color-mix(in srgb,var(--accent) 46%,transparent);
  --v4-flow-soft:color-mix(in srgb,var(--accent) 14%,transparent);
  --v4-canvas:color-mix(in srgb,var(--accent-soft) 56%,var(--paper));
  --v4-canvas-deep:color-mix(in srgb,var(--accent-soft) 78%,var(--paper));
  --v4-motion:cubic-bezier(.2,.8,.2,1);
  --v4-settle:cubic-bezier(.2,1,.3,1);
}

html,body{background:var(--bg)}
.v4-shell{display:block!important;background:var(--bg)!important;isolation:isolate}
.v4-shell::before,.v4-shell::after{display:none!important}
.v4-flow-field{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none;opacity:.68}
.v4-flow-field i{position:absolute;display:block;border:1px solid var(--v4-flow-soft);border-right-color:transparent;border-left-color:transparent;border-radius:50%;transform:rotate(-8deg)}
.v4-flow-field i:nth-child(1){width:74vw;height:26vw;min-height:180px;top:-13vw;right:-18vw}
.v4-flow-field i:nth-child(2){width:64vw;height:24vw;top:-8vw;right:-15vw;opacity:.58}
.v4-flow-field i:nth-child(3){width:56vw;height:23vw;bottom:-18vw;left:-22vw;transform:rotate(13deg)}
.v4-flow-field i:nth-child(4){width:46vw;height:18vw;bottom:-12vw;left:-15vw;opacity:.55;transform:rotate(13deg)}
.v3-stage{position:relative;z-index:1;width:100%;grid-template-rows:auto minmax(0,1fr) auto!important}

/* Global bar: compact on phones, horizontal App navigation on wide screens. */
.v4-globalbar{display:grid!important;min-height:calc(64px + var(--safe-top));grid-template-columns:minmax(0,1fr) auto!important;align-items:end;padding:calc(8px + var(--safe-top)) 14px 8px!important;border:0!important;background:linear-gradient(to bottom,var(--bg),color-mix(in srgb,var(--bg) 88%,transparent))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.v4-wordmark{display:flex;min-width:0;height:48px;align-items:center;gap:10px;padding:4px 2px;border-radius:16px;background:transparent;text-align:left;cursor:pointer}
.v4-wordmark>span:last-child{display:grid;min-width:0;gap:1px}
.v4-wordmark b{overflow:hidden;font-family:Georgia,"Times New Roman",serif;font-size:14px;letter-spacing:.045em;text-overflow:ellipsis;white-space:nowrap}
.v4-wordmark small{overflow:hidden;color:var(--muted);font-size:10px;font-weight:680;text-overflow:ellipsis;white-space:nowrap}
.v4-wordmark .v3-brand-mark{flex:0 0 auto;width:38px;height:38px;border-radius:14px;box-shadow:none}
.v4-top-nav{display:none}
.v4-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:4px}
header.v4-globalbar .v4-toolbar>.v4-connection{display:none;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:650}
.v4-toolbar .v3-appbar-action{display:grid!important;width:44px;height:44px;place-items:center;border-radius:15px;background:transparent;cursor:pointer}
.v4-toolbar .v3-appbar-action[aria-current="page"]{background:var(--accent-soft);color:var(--accent-deep)}

/* A floating, curved dock on touch layouts. Active state is a moving line, not a pill. */
.v3-bottom-nav{position:fixed!important;z-index:20;right:0;bottom:0;left:0;display:grid;min-height:calc(70px + var(--safe-bottom))!important;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px 12px var(--safe-bottom)!important;border:1px solid color-mix(in srgb,var(--line) 68%,transparent)!important;border-bottom:0!important;border-radius:28px 28px 0 0;background:rgba(251,253,253,.94)!important;background:color-mix(in srgb,var(--paper) 92%,transparent)!important;box-shadow:0 -8px 32px rgba(26,56,66,.07);backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.v3-nav-item{min-height:56px!important;gap:2px;border-radius:18px!important;background:transparent!important;color:var(--muted);transition:color 160ms var(--v4-motion),transform 90ms ease!important}
.v3-nav-item::before,.v3-nav-item::after{content:"";position:absolute;z-index:0;inset:auto auto 3px!important;left:calc(50% - 3px);width:0!important;height:2px;border:0!important;border-radius:2px!important;background:var(--accent-deep)!important;opacity:0!important;transform:translateX(-50%)!important;transition:width 240ms var(--v4-settle),opacity 160ms,transform 240ms var(--v4-settle)!important}
.v3-nav-item::after{bottom:0!important;left:calc(50% + 4px);opacity:.68!important}
.v3-nav-item.is-active{color:var(--accent-deep)}
.v3-nav-item.is-active::before,.v3-nav-item.is-active::after{width:15px!important;opacity:1!important}.v3-nav-item.is-active::before{transform:translateX(-58%)!important}.v3-nav-item.is-active::after{transform:translateX(-42%)!important}
.v3-nav-item .v3-icon{width:21px;height:21px}
.v3-nav-item>span:last-child{font-size:max(11px,calc(11px * var(--text-scale)))!important;font-weight:700!important}
.v3-nav-item:active{transform:scale(.965)!important}

.v3-main{scroll-padding-bottom:102px;view-transition-name:misalignment-content}
.v3-page{width:min(100%,1320px)!important;padding:16px 16px calc(104px + var(--safe-bottom))!important;animation:none!important}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(misalignment-content){animation:140ms ease both v4-content-out}
::view-transition-new(misalignment-content){animation:260ms var(--v4-motion) both v4-content-in}
@keyframes v4-content-out{to{opacity:0;transform:translateY(-3px)}}
@keyframes v4-content-in{from{opacity:0;transform:translateY(7px)}}

/* TODAY / NOW — one continuous emotional canvas, not a stack of cards. */
.v4-today-page{display:grid;align-content:start;padding-top:0!important}
.v4-moment-canvas{position:relative;min-height:500px;margin:0 -16px;padding:28px 20px 20px;overflow:hidden;border-radius:0 0 var(--v4-radius-canvas) var(--v4-radius-canvas);background:var(--v4-canvas);background:linear-gradient(145deg,var(--v4-canvas-deep),color-mix(in srgb,var(--paper) 82%,var(--accent-wash)));transition:background 320ms var(--v4-motion)}
.v4-moment-canvas::after{content:"";position:absolute;right:-90px;bottom:-108px;width:240px;height:240px;border:1px solid var(--v4-flow);border-radius:50%;opacity:.48;transition:transform 360ms var(--v4-settle)}
.v4-moment-canvas.is-tangled::after,.v4-moment-canvas.is-tense::after{transform:translate(-24px,-18px) scale(.88)}
.v4-moment-canvas.is-calm::after,.v4-moment-canvas.is-hopeful::after{transform:translate(-8px,-8px) scale(1.08)}
.v4-alignment-lines{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;color:var(--accent-deep);opacity:.5;pointer-events:none}
.v4-alignment-lines path{fill:none;stroke:currentColor;stroke-width:1.05;stroke-dasharray:180 14;vector-effect:non-scaling-stroke;transform-origin:center;animation:v4-line-current 18s linear infinite;transition:transform 360ms var(--v4-settle),opacity 260ms ease}
.v4-alignment-lines path:nth-child(2){animation-duration:24s;animation-direction:reverse}.v4-alignment-lines path:nth-child(3){animation-duration:29s}
@keyframes v4-line-current{to{stroke-dashoffset:-388}}
.v4-alignment-lines path:nth-child(2){opacity:.45;transform:translateX(18px)}
.v4-alignment-lines path:nth-child(3){opacity:.26;transform:translateX(-22px)}
.v4-moment-canvas[class*="is-"] .v4-alignment-lines path:nth-child(2){transform:translateX(5px)}
.v4-moment-canvas.is-open .v4-alignment-lines path:nth-child(2){transform:translateX(18px)}
.v4-moment-canvas.is-calm .v4-alignment-lines path{opacity:.42;transform:translateX(0) rotate(0deg);animation-duration:28s}
.v4-moment-canvas.is-calm .v4-alignment-lines path:nth-child(2){transform:translateY(8px)}
.v4-moment-canvas.is-tangled .v4-alignment-lines path:nth-child(1){transform:translateY(18px) rotate(1.2deg)}
.v4-moment-canvas.is-tangled .v4-alignment-lines path:nth-child(2){transform:translate(-18px,-8px) rotate(-1.6deg)}
.v4-moment-canvas.is-tangled .v4-alignment-lines path:nth-child(3){transform:translate(16px,-20px) rotate(2deg)}
.v4-moment-canvas.is-tense .v4-alignment-lines path{stroke-dasharray:54 11;animation-duration:12s}
.v4-moment-canvas.is-tense .v4-alignment-lines path:nth-child(2){transform:translateY(-20px) rotate(-2.2deg)}
.v4-moment-canvas.is-low .v4-alignment-lines{opacity:.34;transform:translateY(28px)}
.v4-moment-canvas.is-low .v4-alignment-lines path{animation-duration:32s}
.v4-moment-canvas.is-hopeful .v4-alignment-lines{opacity:.58;transform:translateY(-14px) rotate(-.8deg)}
.v4-moment-canvas.is-hopeful{--v4-canvas-deep:color-mix(in srgb,var(--accent-soft) 64%,white)}
.v4-moment-canvas.is-unsure .v4-alignment-lines path{stroke-dasharray:18 18;opacity:.32;animation-duration:25s}
.v4-moment-copy,.v4-mood-field,.v4-quick-start{position:relative;z-index:1}
.v4-moment-copy{max-width:620px}
.v4-moment-copy>p{margin:0 0 18px;color:var(--accent-deep);font-size:12px;font-weight:800;letter-spacing:.06em}
.v4-moment-copy h2{max-width:15em;margin:0;font-size:clamp(30px,8.8vw,45px);font-weight:690;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.v4-moment-copy>span{display:block;max-width:39ch;margin-top:13px;color:var(--muted);font-size:max(14px,calc(14px * var(--text-scale)));line-height:1.62}
.v4-mood-field{margin-top:28px}
.v4-mood-copy{display:grid;gap:3px}
.v4-mood-copy p{margin:0;font-size:max(15px,calc(15px * var(--text-scale)));font-weight:760}
.v4-mood-copy span{min-height:20px;color:var(--muted);font-size:max(12px,calc(12px * var(--text-scale)));line-height:1.45}
.v4-moment-canvas .v3-mood-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:12px}
.v4-moment-canvas .v3-mood{position:relative;display:grid;min-width:0;min-height:62px;place-items:center;align-content:center;gap:3px;padding:5px 1px;border:0!important;border-radius:16px;background:transparent!important;box-shadow:none!important;color:var(--muted);cursor:pointer;transition:color 160ms,transform 90ms ease!important}
.v4-moment-canvas .v3-mood::before{content:"";position:absolute;top:5px;width:30px;height:30px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:50%;opacity:0;transform:scale(.72);transition:opacity 180ms,transform 260ms var(--v4-settle),background 180ms}
.v4-moment-canvas .v3-mood-symbol{z-index:1;display:grid;width:30px;height:30px;place-items:center;color:var(--accent-deep);font-size:19px;line-height:1}
.v4-moment-canvas .v3-mood b{z-index:1;overflow:hidden;width:100%;font-size:max(12px,calc(12px * var(--text-scale)));font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.v4-moment-canvas .v3-mood.is-selected{color:var(--accent-deep)}
.v4-moment-canvas .v3-mood.is-selected::before{background:color-mix(in srgb,var(--paper) 68%,var(--accent-soft));opacity:1;transform:none}
.v4-moment-canvas .v3-mood:active{transform:scale(.96)!important}
.v4-quick-start{position:relative;z-index:1;display:grid;gap:10px;margin-top:18px;padding:14px 0 3px;border-top:1px solid color-mix(in srgb,var(--accent-deep) 23%,transparent)}
.v4-quick-start>label{display:grid;gap:2px}
.v4-quick-start>label small{color:var(--muted);font-size:max(11px,calc(11px * var(--text-scale)));font-weight:650}
.v4-quick-start>label strong{font-size:max(18px,calc(18px * var(--text-scale)));line-height:1.3}
.v4-quick-entry{position:relative;display:grid;min-height:54px;grid-template-columns:23px minmax(0,1fr) 44px;align-items:center;gap:7px;padding:3px 0 3px 2px;border:0;border-bottom:1px solid color-mix(in srgb,var(--accent-deep) 30%,var(--line));border-radius:0;background:transparent;transition:border-color 160ms}
.v4-quick-entry::before,.v4-quick-entry::after{content:"";position:absolute;bottom:-2px;width:34%;height:2px;background:var(--accent-deep);opacity:0;transform:scaleX(.4);transition:opacity 160ms,transform 240ms var(--v4-settle)}
.v4-quick-entry::before{left:0;transform-origin:left}.v4-quick-entry::after{right:0;transform-origin:right}
.v4-quick-entry:focus-within{border-color:transparent;border-radius:10px;outline:2px solid var(--accent-deep);outline-offset:4px}
.v4-quick-entry:focus-within::before,.v4-quick-entry:focus-within::after{opacity:.65;transform:scaleX(1)}
.v4-quick-entry>.v3-icon{width:20px;color:var(--muted)}
.v4-quick-entry input{width:100%;min-width:0;height:44px;padding:0;border:0;outline:0;background:transparent;font-size:max(16px,calc(15px * var(--text-scale)))}
.v4-quick-entry button{display:grid;width:44px;height:44px;place-items:center;border:1px solid color-mix(in srgb,var(--accent-deep) 44%,transparent);border-radius:50%;background:color-mix(in srgb,var(--paper) 32%,transparent);color:var(--accent-deep);cursor:pointer;transition:transform 90ms ease,background 160ms}
.v4-quick-entry button:active{transform:scale(.95)}
.v4-quick-start>footer{display:flex;min-height:44px;align-items:start;justify-content:space-between;gap:10px}
.v4-quick-start>footer small{max-width:34ch;padding-top:8px;color:var(--muted);font-size:max(12px,calc(12px * var(--text-scale)));line-height:1.4}
.v4-quick-start>footer button{flex:0 0 auto;min-height:44px;padding:0 2px;border-bottom:1px solid transparent;background:transparent;color:var(--accent-deep);font-size:max(13px,calc(13px * var(--text-scale)));font-weight:760;cursor:pointer}
.v4-quick-start>footer button:hover{border-bottom-color:currentColor}
.v4-save-confirmation{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:18px;padding:14px 0;border-top:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-bottom:1px solid var(--line);color:var(--accent-deep)}
.v4-save-confirmation>.v3-icon{width:22px}.v4-save-confirmation>span{display:grid;gap:3px}.v4-save-confirmation b{font-size:max(14px,calc(14px * var(--text-scale)))}.v4-save-confirmation small{max-width:54ch;color:var(--muted);font-size:max(12px,calc(12px * var(--text-scale)));line-height:1.45}
.v4-save-confirmation>button{display:flex;min-height:44px;align-items:center;gap:7px;padding:0 2px;border-bottom:1px solid transparent;background:transparent;color:var(--accent-deep);font-weight:760;cursor:pointer}.v4-save-confirmation>button:hover{border-bottom-color:currentColor}.v4-save-confirmation>button .v3-icon{width:18px}
.v4-search-empty{display:grid;justify-items:start;gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}.v4-search-empty p{margin:0;color:var(--muted);line-height:1.55}.v4-search-empty button{min-height:44px;padding:0 2px;border-bottom:1px solid currentColor;background:transparent;color:var(--accent-deep);font-weight:760;cursor:pointer}
.v4-journey-actions{flex-wrap:wrap}.v4-journey-actions button{flex:0 1 auto}

.v4-thread{position:relative;margin:26px 0 0;padding:2px 2px 10px 22px}
.v4-thread::before{content:"";position:absolute;top:9px;bottom:18px;left:4px;width:1px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 12%,transparent))}
.v4-thread::after{content:"";position:absolute;top:4px;left:0;width:9px;height:9px;border:2px solid var(--bg);border-radius:50%;background:var(--accent)}
.v4-thread>header{display:grid;gap:4px;padding-bottom:8px}
.v4-thread>header p{margin:0;font-size:max(18px,calc(18px * var(--text-scale)));font-weight:760}
.v4-thread>header span{color:var(--muted);font-size:max(12px,calc(12px * var(--text-scale)))}
.v4-thread-entry{display:grid;width:100%;min-height:88px;grid-template-columns:54px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.v4-thread-entry time{color:var(--accent-deep);font-family:Georgia,serif;font-size:14px;font-weight:700}
.v4-thread-entry>span{display:grid;min-width:0;gap:4px}
.v4-thread-entry b,.v4-thread-entry em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-thread-entry b{font-size:max(14px,calc(14px * var(--text-scale)))}
.v4-thread-entry em{color:var(--muted);font-size:max(12px,calc(12px * var(--text-scale)));font-style:normal}
.v4-thread-entry>.v3-icon{color:var(--accent-deep)}
.v4-local-note{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;margin-top:18px;color:var(--muted)}
.v4-local-note .v3-icon{width:21px;color:var(--accent-deep)}
.v4-local-note p{margin:0;font-size:max(12px,calc(12px * var(--text-scale)));line-height:1.55}

/* SITUATIONS — an editorial index, not a card catalogue. */
.v4-situations-page,.v4-understand-page{padding-top:20px!important}
.v4-context-head,.v4-editorial-head{display:grid;gap:18px;margin-bottom:24px}
.v4-context-head>div>p,.v4-editorial-head>p{margin:0 0 10px;color:var(--accent-deep);font-size:11px;font-weight:820;letter-spacing:.12em}
.v4-context-head h2,.v4-editorial-head h2{max-width:15em;margin:0;font-size:clamp(30px,8vw,56px);font-weight:680;line-height:1.06;letter-spacing:-.045em;text-wrap:balance}
.v4-context-head>div>span,.v4-editorial-head>span{display:block;max-width:54ch;margin-top:12px;color:var(--muted);font-size:max(14px,calc(14px * var(--text-scale)));line-height:1.62}
.v4-context-head>strong{display:none;color:var(--accent-deep);font-family:Georgia,serif;font-size:78px;font-weight:500;line-height:.85;text-align:right}
.v4-context-head>strong i{display:block;margin-top:10px;font-family:ui-sans-serif,sans-serif;font-size:9px;font-style:normal;font-weight:800;letter-spacing:.18em}
.v4-context-tools{display:grid;gap:0;margin-bottom:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v4-context-tools .v3-search-launch{margin:0;border:0;border-radius:0;background:transparent}
.v4-writing-link{display:grid;width:100%;min-height:68px;grid-template-columns:36px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.v4-writing-link>span{display:grid;gap:2px}.v4-writing-link small{color:var(--muted)}
.v4-situations-page .v3-chip-scroll{gap:18px;margin:0 -16px 8px;padding:3px 16px 10px}
.v4-situations-page .v3-chip-scroll button{min-height:44px;padding:8px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted)}
.v4-situations-page .v3-chip-scroll button.is-selected{border-bottom-color:var(--accent-deep);background:transparent;color:var(--accent-deep)}
.v4-situations-page .v3-situation-list{border-top:1px solid var(--ink)}
.v4-situations-page .v3-situation-list>button{grid-template-columns:38px minmax(0,1fr) 24px;min-height:104px;padding:14px 2px}
.v4-situations-page .v3-situation-list>button>i{align-self:start;padding-top:2px;color:var(--accent-deep);font-family:Georgia,serif;font-size:13px;font-style:normal}
.v4-situations-page .v3-situation-list b{font-size:max(16px,calc(16px * var(--text-scale)));font-weight:730}
.v4-situations-page .v3-situation-list small{font-size:max(10px,calc(10px * var(--text-scale)))}

/* UNDERSTAND — asymmetric media landscape. */
.v4-editorial-head{max-width:820px}
.v4-media-landscape{display:grid;gap:0;border-top:1px solid var(--ink)}
.v4-media-landscape>button{position:relative;display:grid;width:100%;min-height:180px;grid-template-columns:minmax(0,1fr);align-content:space-between;gap:18px;padding:22px 4px;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;overflow:hidden}
.v4-media-landscape>button>span:last-of-type{z-index:1;display:grid;gap:4px}
.v4-media-landscape small{color:var(--accent-deep);font-size:10px;font-weight:820;letter-spacing:.1em}
.v4-media-landscape strong{font-size:max(22px,calc(22px * var(--text-scale)));line-height:1.2}
.v4-media-landscape em{color:var(--muted);font-size:max(13px,calc(13px * var(--text-scale)));font-style:normal}
.v4-film-feature{min-height:280px!important;padding:0!important;background:var(--accent-deep)!important;color:white!important}
.v4-film-feature>span:nth-of-type(2){padding:0 20px 22px}
.v4-film-feature small,.v4-film-feature em{color:rgba(255,255,255,.72)!important}
.v4-film-feature>.v3-icon{position:absolute;right:18px;bottom:22px;color:white}
.v4-film-frame{position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--accent-deep) 92%,#07151b),color-mix(in srgb,var(--accent) 48%,#173844));overflow:hidden}
.v4-film-frame i{position:absolute;left:-10%;width:120%;height:1px;background:rgba(255,255,255,.2);transform:rotate(-8deg)}
.v4-film-frame i:nth-child(1){top:22%}.v4-film-frame i:nth-child(2){top:42%;transform:translateX(8%) rotate(-8deg)}.v4-film-frame i:nth-child(3){top:62%;transform:translateX(-5%) rotate(-8deg)}
.v4-film-frame b{position:absolute;top:18px;right:18px;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.08em}
.v4-film-play{position:absolute;top:50%;left:50%;display:grid;width:58px;height:58px;place-items:center;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(255,255,255,.08);transform:translate(-50%,-50%)}.v4-film-play .v3-icon{width:25px;height:25px}
.v4-map-art{position:relative;width:100%;height:74px;color:var(--accent-deep)}
.v4-map-art i{position:absolute;width:12px;height:12px;border:2px solid currentColor;border-radius:50%}
.v4-map-art i::after{content:"";position:absolute;top:4px;left:10px;width:34vw;max-width:180px;height:1px;background:currentColor;transform-origin:left;transform:rotate(8deg);opacity:.45}
.v4-map-art i:nth-child(1){top:5px;left:8%}.v4-map-art i:nth-child(2){top:32px;left:42%}.v4-map-art i:nth-child(3){top:8px;right:12%}.v4-map-art i:nth-child(4){right:35%;bottom:0}
.v4-quiz-progress{display:grid!important;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:12px;color:var(--accent-deep)}
.v4-quiz-progress b,.v4-quiz-progress em{font-family:Georgia,serif;font-size:26px;font-style:normal;font-weight:500;line-height:1}
.v4-quiz-progress i{width:100%;height:2px;background:linear-gradient(90deg,var(--accent-deep) 6.7%,color-mix(in srgb,var(--accent) 22%,transparent) 6.7%)}
.v4-reference-lines{margin-top:28px;border-top:1px solid var(--ink)}
.v4-reference-lines>button{display:grid;width:100%;min-height:76px;grid-template-columns:36px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.v4-reference-lines>button>span{display:grid;gap:2px}.v4-reference-lines small{color:var(--muted);line-height:1.35}

/* Journal becomes a ruled workspace and timeline. */
.v3-journal-page{padding-top:22px!important}
.v3-journal-head{display:flex!important;max-width:none!important;align-items:end;justify-content:space-between;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--ink)}
.v3-journal-head h2{font-size:clamp(28px,7vw,48px)!important}
.v3-new-record{min-height:48px!important;padding:8px 0!important;border:0!important;border-bottom:1px solid var(--accent-deep)!important;border-radius:0!important;background:transparent!important;color:var(--accent-deep)!important;box-shadow:none!important}
.v3-record-search{margin-top:20px!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important}
.v3-record-count{color:var(--muted);font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.08em}
.v3-record-list{position:relative;border-left:1px solid var(--line)!important}
.v3-record-list>button{position:relative;margin-left:16px!important;padding:14px 2px!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important}
.v3-record-list>button::before{content:"";position:absolute;top:26px;left:-21px;width:9px;height:9px;border:2px solid var(--bg);border-radius:50%;background:var(--accent)}
.v3-record-preview{border:0!important;border-left:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.v3-record-preview button{padding-right:0!important;padding-left:0!important;border:0!important;border-bottom:1px solid var(--accent-deep)!important;border-radius:0!important;background:transparent!important}
.v3-empty{border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:transparent!important}
.v3-empty button{border:0!important;border-bottom:1px solid var(--accent-deep)!important;border-radius:0!important;background:transparent!important;color:var(--accent-deep)!important}

/* Settings: one continuous workbench, not stacked white cards. */
.v3-me-page{max-width:1120px!important;padding-top:22px!important}
.v3-me-page>.v3-page-intro{max-width:760px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--ink)}
.v3-settings-grid{display:block!important}
.v3-setting-section{margin:0!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.v3-setting-section>header{padding:22px 2px 12px!important;border:0!important;background:transparent!important}
.v3-setting-section>header>.v3-icon{background:transparent!important}
.v3-setting-body,.v3-setting-actions{padding:8px 2px 24px!important}
.v3-setting-actions>button{padding-right:2px!important;padding-left:2px!important;border-radius:0!important;background:transparent!important}
.v3-theme-picker{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.v3-theme-picker button{position:relative;min-height:92px!important;align-content:end!important;justify-items:start!important;padding:12px!important;border:1px solid transparent!important;border-radius:24px!important;background:var(--paper)!important;color:white!important;font-weight:800!important;text-shadow:0 1px 4px rgba(0,0,0,.34);overflow:hidden;isolation:isolate}
.v3-theme-picker button i{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;opacity:.9}
.v3-theme-picker button::after{content:"";position:absolute;z-index:0;inset:34% 0 0;background:linear-gradient(180deg,transparent,rgba(5,24,31,.84));pointer-events:none}
.v3-theme-picker button[data-value="plum"]::after{background:linear-gradient(180deg,transparent,rgba(48,28,61,.86))}
.v3-theme-picker button[data-value="forest"]::after{background:linear-gradient(180deg,transparent,rgba(17,49,39,.86))}
.v3-theme-picker button>span{position:relative;z-index:1;color:white;font-size:max(13px,calc(13px * var(--text-scale)));font-weight:800;text-shadow:0 1px 5px rgba(0,0,0,.52)}
.v3-theme-picker button.is-selected{border-color:var(--accent-deep)!important;box-shadow:inset 0 0 0 2px var(--bg)!important}
.v3-theme-picker button.is-selected::before{content:"✓";position:absolute;z-index:2;top:9px;right:9px;display:grid;width:26px;height:26px;place-items:center;border:1px solid rgba(255,255,255,.76);border-radius:50%;background:rgba(6,24,30,.68);color:white;font-size:15px;line-height:1;text-shadow:none}
.v3-segmented{padding:0!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important}
.v3-segmented button{border-radius:0!important;background:transparent!important}
.v3-segmented button.is-selected{border-bottom:2px solid var(--accent-deep)!important;background:transparent!important;color:var(--accent-deep)!important}

/* Detail screens inherit the editorial rather than card-heavy language. */
.v3-detail-page{padding-top:18px!important}
.v3-page-intro h2{letter-spacing:-.04em}
.v3-opening-list>button,.v3-writing-workflow fieldset button,.v3-quiz-options button{border-radius:16px!important;box-shadow:none!important}
.v3-scene-detail>header,.v3-accordion,.v3-guide{border-top:0}
.v3-video video{border-radius:28px!important}

@media (hover:hover) and (pointer:fine){
  .v4-wordmark:hover,.v4-toolbar .v3-appbar-action:hover{background:color-mix(in srgb,var(--accent-soft) 48%,transparent)}
  .v4-quick-entry button:hover .v3-icon,.v4-writing-link:hover>.v3-icon:last-child,.v4-thread-entry:hover>.v3-icon,.v4-reference-lines>button:hover>.v3-icon:last-child{transform:translateX(3px)}
  .v4-moment-canvas .v3-mood:hover::before{opacity:.58;transform:none}
  .v4-media-landscape>button:hover>span:last-of-type strong,.v4-situations-page .v3-situation-list>button:hover b{color:var(--accent-deep)}
  .v4-film-feature:hover>span:last-of-type strong{color:white!important}
}

@media (max-width:479px){
  .v4-moment-canvas .v3-mood-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2px}
  .v4-moment-canvas .v3-mood{min-height:58px}
  .v4-save-confirmation{grid-template-columns:26px minmax(0,1fr)}
  .v4-save-confirmation>button{grid-column:2;justify-self:start}
}

@media (max-width:899px){
  .v3-bottom-nav{display:grid!important}
}

@media (max-width:350px){
  .v4-wordmark b{font-size:12px}.v4-wordmark small{display:none}
  .v4-moment-canvas{min-height:510px;padding-right:16px;padding-left:16px}
  .v4-moment-copy h2{font-size:clamp(28px,9.2vw,34px)}
  .v4-moment-canvas .v3-mood{min-height:54px}
  .v4-quick-start{margin-top:12px}
  .v4-quick-start>footer{display:grid;grid-template-columns:1fr;gap:2px}
  .v4-quick-start>footer small{max-width:none;padding-top:4px}
  .v4-quick-start>footer button{justify-self:start}
  .v3-nav-item>span:last-child{font-size:max(10px,calc(10px * var(--text-scale)))!important}
}

@media (min-width:640px){
  .v3-page{padding:26px 28px calc(110px + var(--safe-bottom))!important}
  .v4-today-page{padding-top:12px!important}
  .v4-moment-canvas{margin:0;min-height:520px;padding:42px 38px 28px;border-radius:var(--v4-radius-canvas)}
  .v4-moment-copy h2{font-size:clamp(38px,6.6vw,58px)}
  .v4-quick-start{max-width:620px}
  .v4-thread{margin-right:10px;margin-left:10px}
  .v4-context-head{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .v4-context-head>strong{display:block}
  .v4-context-tools{grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)}
  .v4-writing-link{border-top:0;border-left:1px solid var(--line)}
  .v4-media-landscape{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-film-feature{grid-row:span 2;min-height:430px!important}
  .v4-map-feature,.v4-quiz-feature{padding:24px!important}
}

@media (min-width:900px){
  .v3-stage{grid-template-rows:auto minmax(0,1fr)!important}
  .v4-globalbar{min-height:76px;grid-template-columns:minmax(210px,.8fr) minmax(420px,1.5fr) minmax(210px,.8fr)!important;align-items:center;padding:10px 28px!important;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;background:color-mix(in srgb,var(--bg) 90%,transparent)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
  .v4-wordmark>span:last-child small{display:none}
  .v4-top-nav{display:flex;min-width:0;align-items:center;justify-content:center;gap:6px}
  .v4-top-nav .v3-nav-item{display:flex!important;min-height:46px!important;align-items:center;gap:7px;padding:0 15px}
  .v4-top-nav .v3-nav-item::before{bottom:2px!important}
  .v4-top-nav .v3-nav-icon{width:22px;height:22px}
  .v4-top-nav .v3-nav-item>span:last-child{font-size:max(12px,calc(12px * var(--text-scale)))!important}
  header.v4-globalbar .v4-toolbar>.v4-connection{display:flex}
  .v3-bottom-nav{display:none!important}
  .v3-main{scroll-padding-bottom:40px}
  .v3-page{padding:42px 48px 56px!important}
  .v4-today-page{min-height:100%;grid-template-columns:repeat(12,minmax(0,1fr));align-content:center;gap:28px;padding-top:34px!important;padding-bottom:34px!important}
  .v4-moment-canvas{grid-column:1/span 8;min-height:min(650px,calc(100dvh - 144px));display:grid;align-content:center;padding:50px 50px 38px;border-radius:56px 28px 56px 28px}
  .v4-thread{grid-column:9/-1;align-self:center;margin:0;padding-left:26px}
  .v4-moment-copy h2{font-size:clamp(46px,4.2vw,66px)}
  .v4-moment-copy>span{font-size:max(15px,calc(15px * var(--text-scale)))}
  .v4-mood-field{margin-top:40px}
  .v4-moment-canvas .v3-mood{min-height:72px}
  .v4-quick-start{margin-top:30px}
  .v4-situations-page,.v4-understand-page{padding-top:46px!important}
  .v4-situations-page .v3-situation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:38px}
  .v4-context-head h2,.v4-editorial-head h2{font-size:clamp(48px,4.5vw,68px)}
  .v4-media-landscape{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
  .v4-reference-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .v4-reference-lines>button{grid-template-columns:36px minmax(0,1fr) 22px;padding-right:16px;border-right:1px solid var(--line);border-bottom:0}
  .v4-reference-lines>button:last-child{border-right:0}
  .v3-settings-grid{columns:2;column-gap:42px}
  .v3-setting-section{break-inside:avoid}
}

@media (min-width:1280px){
  .v4-globalbar{padding-right:42px!important;padding-left:42px!important}
  .v3-page{padding-right:64px!important;padding-left:64px!important}
  .v4-today-page{gap:48px}
  .v4-moment-canvas{grid-column:1/span 8;padding:58px 64px 44px}
  .v4-thread{grid-column:9/-1}
}

@media (max-height:640px) and (orientation:landscape){
  .v4-moment-canvas{min-height:430px;padding-top:24px}
  .v4-moment-copy h2{font-size:32px}.v4-mood-field{margin-top:18px}.v4-quick-start{margin-top:12px}
}

@media (prefers-reduced-transparency:reduce){
  .v3-bottom-nav,.v4-globalbar{background:var(--paper)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  .v4-alignment-lines path,.v4-moment-canvas::after,.v4-flow-field i{transition:none!important;animation:none!important}
  .v4-moment-canvas .v3-mood,.v4-moment-canvas .v3-mood::before,.v4-moment-canvas .v3-mood:active{transition:none!important;animation:none!important;transform:none!important}
  .v3-nav-item,.v4-quick-entry button,.v4-writing-link>.v3-icon:last-child,.v4-thread-entry>.v3-icon{transition:none!important;animation:none!important;transform:none!important}
  .v3-nav-item::before,.v3-nav-item::after,.v4-quick-entry::before,.v4-quick-entry::after{transition:none!important;animation:none!important}
  ::view-transition-old(misalignment-content),::view-transition-new(misalignment-content){animation:none!important}
}
.reduce-motion .v4-alignment-lines path,.reduce-motion .v4-moment-canvas::after,.reduce-motion .v4-flow-field i{transition:none!important;animation:none!important}
:root.reduce-motion .v4-moment-canvas .v3-mood,:root.reduce-motion .v4-moment-canvas .v3-mood::before,:root.reduce-motion .v4-moment-canvas .v3-mood:active{transition:none!important;animation:none!important;transform:none!important}
:root.reduce-motion .v3-nav-item,:root.reduce-motion .v4-quick-entry button,:root.reduce-motion .v4-writing-link>.v3-icon:last-child,:root.reduce-motion .v4-thread-entry>.v3-icon{transition:none!important;animation:none!important;transform:none!important}
:root.reduce-motion .v3-nav-item::before,:root.reduce-motion .v3-nav-item::after,:root.reduce-motion .v4-quick-entry::before,:root.reduce-motion .v4-quick-entry::after{transition:none!important;animation:none!important}
@media (forced-colors:active){
  .v4-moment-canvas,.v4-film-feature{background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText}
  .v4-film-feature small,.v4-film-feature em{color:CanvasText!important}
  .v4-alignment-lines,.v4-flow-field{display:none}
  .v3-nav-item.is-active::before{background:CanvasText!important}
}