/*
 * Static, code-native media for the news screen/reader and Tokyo clock/weather.
 * Load AFTER desk-news.css and desk-weather.css. The scene supplies data-style;
 * body-level dialogs carry their own data-style. No text is rasterized/filtered.
 * Decorative backgrounds and pseudo-elements never intercept pointer events.
 */
[data-style="watercolor"] {
  --dm-paper:#f4edf1; --dm-ink:#352b40; --dm-muted:#695a70; --dm-accent:#835172; --dm-line:#a991ae;
  --dm-texture:url('./assets/desk-materials/watercolor.svg'); --dm-size:640px 480px;
  --dm-round:18px 12px 22px 14px; --dm-rule:1px solid; --dm-shadow:0 4px 0 #b69db32b;
  --dm-title:Georgia,'Songti SC','Noto Serif CJK SC',serif; --dm-title-weight:500;
}
[data-style="comic"] {
  --dm-paper:#f7f0d9; --dm-ink:#202029; --dm-muted:#62565a; --dm-accent:#a6283e; --dm-line:#35313a;
  --dm-texture:url('./assets/desk-materials/comic.svg'); --dm-size:96px 96px;
  --dm-round:3px; --dm-rule:2px solid; --dm-shadow:3px 3px 0 #202029;
  --dm-title:Impact,'Arial Black','PingFang SC',sans-serif; --dm-title-weight:800;
}
[data-style="punk"] {
  --dm-paper:#ece7d7; --dm-ink:#252424; --dm-muted:#635662; --dm-accent:#8f286b; --dm-line:#59514e;
  --dm-texture:url('./assets/desk-materials/punk.svg'); --dm-size:420px 460px;
  --dm-round:1px 5px 2px 0; --dm-rule:2px dashed; --dm-shadow:4px 3px 0 #a6a831;
  --dm-title:'Arial Black','PingFang SC',sans-serif; --dm-title-weight:850;
}
[data-style="mandala"] {
  --dm-paper:#f4edda; --dm-ink:#284149; --dm-muted:#5d6662; --dm-accent:#80602b; --dm-line:#9c895b;
  --dm-texture:url('./assets/desk-materials/mandala.svg'); --dm-size:240px 240px;
  --dm-round:22px 22px 5px 5px; --dm-rule:3px double; --dm-shadow:0 0 0 2px #f4edda,0 0 0 3px #a78c4d;
  --dm-title:Georgia,'Songti SC',serif; --dm-title-weight:600;
}
[data-style="pop"] {
  --dm-paper:#fff7c5; --dm-ink:#222130; --dm-muted:#605353; --dm-accent:#b72150; --dm-line:#272333;
  --dm-texture:url('./assets/desk-materials/pop.svg'); --dm-size:40px 40px;
  --dm-round:0; --dm-rule:3px solid; --dm-shadow:5px 4px 0 #e34a72,-2px -2px 0 #54b4ca;
  --dm-title:Impact,'Arial Black','PingFang SC',sans-serif; --dm-title-weight:850;
}
[data-style="future"] {
  --dm-paper:#182431; --dm-ink:#f0eee1; --dm-muted:#b4c4cc; --dm-accent:#8be1d6; --dm-line:#719299;
  --dm-texture:url('./assets/desk-materials/future.svg'); --dm-size:480px 400px;
  --dm-round:1px 10px 1px 10px; --dm-rule:1px solid; --dm-shadow:3px 0 0 #c9699166,-2px 1px 0 #71bece66;
  --dm-title:ui-monospace,SFMono-Regular,Consolas,'PingFang SC',monospace; --dm-title-weight:600;
}
[data-style="renaissance"] {
  --dm-paper:#eee0bb; --dm-ink:#473725; --dm-muted:#746043; --dm-accent:#795025; --dm-line:#977b4e;
  --dm-texture:url('./assets/desk-materials/renaissance.svg'); --dm-size:460px 420px;
  --dm-round:2px 7px 3px 5px; --dm-rule:3px double; --dm-shadow:2px 3px 0 #98764230;
  --dm-title:Georgia,'Songti SC','Noto Serif CJK SC',serif; --dm-title-weight:500;
}
[data-style="ink"] {
  --dm-paper:#fafaf7; --dm-ink:#141414; --dm-muted:#575754; --dm-accent:#141414; --dm-line:#363635;
  --dm-texture:url('./assets/desk-materials/ink.svg'); --dm-size:200px 220px;
  --dm-round:2px 8px 3px 5px; --dm-rule:1.5px solid; --dm-shadow:2px 2px 0 #fafaf7,3px 3px 0 #141414;
  --dm-title:Georgia,'Songti SC',serif; --dm-title-weight:600;
}
[data-style="graffiti"] {
  --dm-paper:#e8ede5; --dm-ink:#28362e; --dm-muted:#566557; --dm-accent:#805071; --dm-line:#82968a;
  --dm-texture:url('./assets/desk-materials/graffiti.svg'); --dm-size:460px 430px;
  --dm-round:13px 4px 17px 6px; --dm-rule:2px solid; --dm-shadow:3px 2px 0 #a3c9b4,-2px -1px 0 #c297b0;
  --dm-title:'Arial Black','PingFang SC',sans-serif; --dm-title-weight:800;
}
[data-style="offset"] {
  --dm-paper:#f0e8cb; --dm-ink:#373b36; --dm-muted:#686954; --dm-accent:#436f75; --dm-line:#8c735c;
  --dm-texture:url('./assets/desk-materials/offset.svg'); --dm-size:120px 120px;
  --dm-round:2px; --dm-rule:1px solid; --dm-shadow:2px 1px 0 #a4455d77,-2px -1px 0 #348e9b66;
  --dm-title:Georgia,'Songti SC',serif; --dm-title-weight:650;
}

/* Each surface paints its own material, including scrollable modal content. */
:is(.dn-screen,.dn-dialog,.dw-clock,.dw-dialog) {
  --dn-paper:var(--dm-paper,#f4f0e5); --dn-ink:var(--dm-ink,#26302c);
  --dn-muted:var(--dm-muted,#656962); --dn-accent:var(--dm-accent,#566e60); --dn-line:var(--dm-line,#9ba497);
  --dw-paper:var(--dm-paper,#f4f0e5); --dw-ink:var(--dm-ink,#26302c);
  --dw-muted:var(--dm-muted,#656962); --dw-highlight:var(--dm-accent,#566e60); --dw-line:var(--dm-line,#9ba497);
  background-color:var(--dm-paper,#f4f0e5);
  background-image:var(--dm-texture,none);
  background-size:var(--dm-size,240px 240px);
  background-repeat:repeat;
  background-attachment:local;
  color:var(--dm-ink,#26302c);
  isolation:isolate;
}
.dn-screen {box-shadow:inset 0 0 0 1px var(--dn-line),inset 0 0 20px #0000000d}
/* The original scene also owns high-specificity per-style screen palettes. */
#desk-app[data-style] .dn-screen {
  --dn-paper:var(--dm-paper,#f4f0e5); --dn-ink:var(--dm-ink,#26302c);
  --dn-muted:var(--dm-muted,#656962); --dn-accent:var(--dm-accent,#566e60); --dn-line:var(--dm-line,#9ba497);
}
.dn-screen::after {content:none}
:is(.dn-dialog,.dw-dialog) {
  border:var(--dm-rule,1px solid) var(--dm-line,#9ba497);
  border-radius:var(--dm-round,12px);
  box-shadow:var(--dm-shadow,0 2px 0 #0002),0 24px 90px #0007;
}
:is(.dn-dialog,.dw-dialog)::backdrop {background:#101319b8;backdrop-filter:blur(7px)}
#desk-app[data-style] .dw-clock,
.dw-clock[data-style] {
  color:var(--dm-ink,#26302c); text-shadow:none;
  border:var(--dm-rule,1px solid) var(--dm-line,#9ba497);
  border-radius:var(--dm-round,12px);
  box-shadow:inset 0 0 0 3px var(--dm-paper,#f4f0e5),inset 0 0 0 4px var(--dm-line,#9ba497);
}
.dw-clock::before {
  content:"";position:absolute;inset:6px;border:1px solid var(--dm-line,#9ba497);
  border-radius:inherit;opacity:.42;pointer-events:none;
}
.dw-clock-weather {border-left:1px solid var(--dm-line,#9ba497)}
#desk-app[data-style] .dw-small-icon {color:var(--dm-accent,#566e60)}
.dw-tokyo,.dw-date {opacity:1;color:var(--dm-muted,#656962)}
.dw-condition {color:var(--dm-ink,#26302c)}
/* Override earlier ancestor-based weather palette rules at equal specificity. */
#desk-app[data-style] .dw-dialog {
  --dw-paper:var(--dm-paper,#f4f0e5); --dw-ink:var(--dm-ink,#26302c);
  --dw-muted:var(--dm-muted,#656962); --dw-highlight:var(--dm-accent,#566e60); --dw-line:var(--dm-line,#9ba497);
}
.dw-time {font-weight:450}
.dw-temperature {font-weight:550}
.dn-story-rank {color:var(--dn-accent)}
.dn-notice {color:var(--dn-ink);border-color:var(--dn-accent);background:color-mix(in srgb,var(--dn-accent) 10%,var(--dn-paper))}
.dw-status {color:var(--dw-ink)}
:is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {
  font-family:var(--dm-title,inherit);font-weight:var(--dm-title-weight,600);
}
.dn-reader-tabs {
  background-color:var(--dn-paper);background-image:var(--dm-texture,none);
  background-size:var(--dm-size,240px 240px);background-position:center 14%;
  border-bottom:var(--dm-rule,1px solid) var(--dn-line);
}
.dn-reader-tabs .dn-category[aria-pressed="true"] {font-weight:750}
.dn-reader-tabs .dn-category[aria-pressed="true"]::after {height:3px}
.dn-screen-tabs {border-top:var(--dm-rule,1px solid) var(--dn-ink)}
.dn-screen-tabs .dn-category,.dn-screen-read {border-radius:var(--dm-round,3px)}
.dn-screen-read {border:1px solid var(--dn-ink);font-weight:650}
.dn-screen-story,.dn-story {border-bottom-color:var(--dn-line)}
.dw-metrics {border-top:var(--dm-rule,1px solid) var(--dw-line);border-bottom:var(--dm-rule,1px solid) var(--dw-line)}
.dw-hour {
  border:1px solid var(--dw-line);border-radius:var(--dm-round,12px);
  background-color:color-mix(in srgb,var(--dw-paper) 82%,transparent);
}
.dw-refresh,.dn-close,.dw-close {border:1px solid var(--dm-line,#9ba497);border-radius:var(--dm-round,12px)}
:is(.dn-dialog,.dw-dialog) :is(button,a):focus-visible,
.dw-clock:focus-visible {outline:3px solid var(--dm-accent,#566e60);outline-offset:3px}

/* 01 / wet pigments: soft irregular rules and transparent tinted washes. */
[data-style="watercolor"] :is(.dn-reader-header,.dw-heading),
.dn-screen:is([data-style="watercolor"]),
[data-style="watercolor"] .dn-screen-header {
  background-image:radial-gradient(ellipse at 26% 75%,#bfa1ca35,transparent 68%),radial-gradient(ellipse at 80% 20%,#9fc9db30,transparent 65%);
}
[data-style="watercolor"] :is(.dn-story,.dn-screen-story,.dw-day) {border-bottom-style:dotted}
[data-style="watercolor"] .dn-reader-tabs .dn-category[aria-pressed="true"]::after {height:5px;border-radius:40% 60% 45% 35%;opacity:.55}
[data-style="watercolor"] .dw-hour {border-color:#ad91af80;box-shadow:0 2px 3px #b398b91b}

/* 02 / comic inking: compact halftone, outlined panels, heavy title strokes. */
[data-style="comic"] :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {letter-spacing:.01em;text-shadow:1px 1px 0 #f7f0d9,2px 2px 0 #ac444555}
[data-style="comic"] :is(.dn-screen-read,.dn-screen-tabs .dn-category[aria-pressed="true"],.dw-refresh) {box-shadow:2px 2px 0 var(--dm-ink)}
[data-style="comic"] :is(.dn-story,.dn-screen-story,.dw-day) {border-bottom-width:1.5px}
[data-style="comic"] .dw-hour {border-width:2px;box-shadow:2px 2px 0 #20202924}
[data-style="comic"] .dw-time {font-weight:700;letter-spacing:-3px}
[data-style="comic"] :is(.dw-large-time,.dw-hero-temperature) {font-weight:650}

/* 03 / xerox and torn paper: angular inset pieces, exposed ink, broken rules. */
[data-style="punk"] :is(.dn-reader-header h2,.dw-heading h2) {
  width:fit-content;padding:3px 10px 4px;background:#252424;color:#f1eddb;
  box-shadow:5px 3px 0 #b9bd56;transform:rotate(-.6deg);
}
[data-style="punk"] .dn-screen-brand {text-decoration:underline;text-decoration-thickness:5px;text-decoration-color:#a4aa45;text-underline-offset:5px}
[data-style="punk"] :is(.dn-story,.dn-screen-story,.dw-day) {border-bottom-style:dashed}
[data-style="punk"] .dn-reader-tabs .dn-category[aria-pressed="true"] {color:#f2edda;background:#272524;box-shadow:inset 0 -4px #b9bd56}
[data-style="punk"] .dn-reader-tabs .dn-category[aria-pressed="true"]::after {background:none}
[data-style="punk"] .dw-hour:nth-child(2n) {border-style:dashed;background:#ddd9c780}
[data-style="punk"] .dw-time {font-weight:750;letter-spacing:-2px;text-shadow:1px 1px 0 #bbb967}

/* 04 / mandala ornament: repeated rosettes, double fillets and rounded arches. */
[data-style="mandala"] :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {letter-spacing:.13em}
[data-style="mandala"] :is(.dn-story,.dw-day) {border-bottom-style:double;border-bottom-width:3px}
[data-style="mandala"] .dn-screen-read {border:3px double var(--dm-paper);outline:1px solid var(--dm-ink)}
[data-style="mandala"] .dn-reader-tabs .dn-category[aria-pressed="true"]::after {height:4px;border-top:1px solid var(--dm-accent);border-bottom:1px solid var(--dm-accent);background:transparent}
[data-style="mandala"] .dw-hour {border-width:3px;border-style:double;border-radius:27px 27px 4px 4px}
[data-style="mandala"] .dw-large-time {font-family:Georgia,serif;font-weight:400}

/* 05 / pop: visibly larger Ben-Day dots, primary-color offset panel edges. */
[data-style="pop"] :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {text-shadow:1px 1px 0 #fff7c5,3px 2px 0 #df5178;letter-spacing:.02em}
[data-style="pop"] :is(.dn-screen-tabs .dn-category[aria-pressed="true"],.dn-screen-read,.dw-refresh) {box-shadow:2px 2px 0 #ed4d76,-1px -1px 0 #4c9eca;border-width:2px}
[data-style="pop"] .dn-reader-tabs .dn-category[aria-pressed="true"] {background:#f7df57;color:#222130;box-shadow:inset 0 0 0 2px #222130}
[data-style="pop"] .dn-reader-tabs .dn-category[aria-pressed="true"]::after {background:#c03154;height:5px}
[data-style="pop"] .dw-hour {border-width:2px;box-shadow:2px 2px 0 #54b4ca}
[data-style="pop"] :is(.dn-story,.dn-screen-story,.dw-day) {border-bottom-width:2px}
[data-style="pop"] .dw-time {font-weight:800;letter-spacing:-3px;text-shadow:1.5px 1px #e34a7280}
[data-style="pop"] .dw-large-time {font-weight:650;text-shadow:2px 1px #e34a7266,-1px 0 #54b4ca77}

/* 06 / future illustration: dry brush marks and stepped material planes. */
[data-style="future"] :is(.dn-reader-header,.dw-heading) {background-image:linear-gradient(165deg,transparent 71%,#83b7bf12 71%,#83b7bf12 75%,transparent 75%)}
[data-style="future"] :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {letter-spacing:.09em;border-left:3px solid #93d4d0;padding-left:11px}
[data-style="future"] :is(.dn-story,.dn-screen-story,.dw-day) {border-bottom-style:dashed;border-bottom-color:#77919488}
[data-style="future"] .dn-reader-tabs .dn-category[aria-pressed="true"] {background:#4b697c38;box-shadow:inset 3px 0 #8bd1cb}
[data-style="future"] .dw-hour {box-shadow:inset 0 4px #a57d9640,1px 0 #b9628055}
[data-style="future"] .dw-time {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:500;font-size:59px;letter-spacing:-4px}
[data-style="future"] .dw-large-time {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:400;letter-spacing:-6px}
[data-style="future"] .dw-small-icon svg {stroke-width:2}

/* 07 / draughtsman's parchment: sepia crosshatching and pencil-like double rules. */
[data-style="renaissance"] :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {letter-spacing:.07em;font-style:italic}
[data-style="renaissance"] :is(.dn-story,.dn-screen-story,.dw-day) {border-bottom-style:double;border-bottom-width:3px}
[data-style="renaissance"] .dn-story-rank {font-style:normal;border-right:1px solid #98784e77;padding-right:8px}
[data-style="renaissance"] .dn-reader-tabs .dn-category[aria-pressed="true"]::after {height:4px;border-top:1px solid var(--dm-accent);border-bottom:1px solid var(--dm-accent);background:none;transform:rotate(-.3deg)}
[data-style="renaissance"] .dw-hour {border-style:double;border-width:3px;background:#f1e4c78c}
[data-style="renaissance"] :is(.dw-large-time,.dw-time) {font-family:Georgia,'Times New Roman',serif;font-weight:400}
[data-style="renaissance"] .dw-large-time {letter-spacing:-3px}

/* 08 / monochrome drawing: no chromatic shadows, irregular contours and hatching. */
[data-style="ink"] :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {text-shadow:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
[data-style="ink"] .dn-screen-read {box-shadow:2px 2px 0 #fff,3px 3px 0 #111}
[data-style="ink"] .dn-reader-tabs .dn-category[aria-pressed="true"]::after {height:4px;background:repeating-linear-gradient(-25deg,#111 0 1px,transparent 1px 3px);border-bottom:1px solid #111}
[data-style="ink"] .dw-hour {box-shadow:1px 2px 0 #fff,2px 3px 0 #111;border-radius:4px 9px 3px 6px}
[data-style="ink"] :is(.dw-large-time,.dw-time) {font-family:Georgia,serif;font-weight:400;text-shadow:none}
[data-style="ink"] :is(.dw-small-icon svg,.dw-large-icon svg,.dw-hour svg) {stroke-width:1.8}

/* 09 / street paint: dry marker underline, spray edge, layered painted panels. */
[data-style="graffiti"] :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {text-decoration:underline;text-decoration-color:#c78fad;text-decoration-thickness:6px;text-underline-offset:6px;text-shadow:1px -1px 0 #c4dac6}
[data-style="graffiti"] .dn-reader-tabs .dn-category[aria-pressed="true"]::after {height:6px;border-radius:80% 20% 65% 35%;background:#697db0;transform:rotate(-1deg)}
[data-style="graffiti"] :is(.dn-screen-read,.dw-refresh) {box-shadow:3px 2px 0 #b28aa6,-2px -1px 0 #9dc2ae}
[data-style="graffiti"] .dw-hour {border-width:2px;border-color:#93a898;border-bottom-color:#a67c9b;background:#e6eedea3}
[data-style="graffiti"] .dw-time {font-weight:750;letter-spacing:-2px;text-shadow:1px 1px #c296b0}
[data-style="graffiti"] .dw-large-time {font-weight:650;text-shadow:1px 1px #adc3a8}

/* 10 / offset press: independent ink plates, coarse pulp, slight registration errors. */
[data-style="offset"] :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2) {text-shadow:1px .6px 0 #b1556380,-.7px -.5px 0 #41879580}
[data-style="offset"] :is(.dn-story,.dn-screen-story,.dw-day) {border-bottom-color:#a2555a80;box-shadow:0 1px 0 #468b9650}
[data-style="offset"] .dn-reader-tabs {box-shadow:0 1px 0 #43929b66}
[data-style="offset"] .dn-reader-tabs .dn-category[aria-pressed="true"]::after {box-shadow:1px 1px #ba637a,-1px -1px #7ca6b0}
[data-style="offset"] :is(.dn-screen-read,.dw-refresh,.dw-hour) {box-shadow:1.5px 1px 0 #b6506477,-1px -.7px 0 #3b98a177}
[data-style="offset"] :is(.dw-time,.dw-large-time) {font-weight:500;text-shadow:1px .5px #ac536e80,-.7px -.5px #40899170}

@media (max-width:600px) {
  :is(.dn-dialog,.dw-dialog) {box-shadow:var(--dm-shadow,0 2px 0 #0002),0 12px 60px #0007}
  [data-style="future"] .dw-large-time {font-size:66px;letter-spacing:-5px}
  [data-style="punk"] :is(.dn-reader-header h2,.dw-heading h2) {padding-right:7px;padding-left:7px}
}
@media (forced-colors:active) {
  :is(.dn-screen,.dn-dialog,.dw-clock,.dw-dialog,.dn-reader-tabs) {background-image:none;border-color:CanvasText;box-shadow:none}
  :is(.dn-reader-header h2,.dn-screen-brand,.dw-heading h2,.dw-time,.dw-large-time) {text-shadow:none}
}