/* Styles 5/8 (lines 982–1217 of styles.css until v122) — the Retro and Medieval skins.
   Order matters (a later rule wins): index.html loads css/1-… → css/8-… in this order; see docs/REFACTOR.md step 4. */
/* ================= SKIN: RETRO COMPUTER (a 90s desktop) =================
   Grey bevelled windows, navy title bars, square corners, a teal desktop behind the chat,
   jerky step animations. No logos or names of real systems — just the era's look. */
html:root[data-skin="retro"]{
  color-scheme: light;
  --bg:#c0c0c0; --panel:#c0c0c0; --panel-2:#ffffff; --line:#808080;
  --text:#000000; --muted:#3a3a3a;
  --accent:#000080; --accent-fill:#000080; --on-accent:#ffffff; --accent-dim:#c8c8e8;
  --user-text:#000000;
  --ok:#007a00; --ok-bg:#ffffff; --ok-text:#005200; --ok-border:#007a00;
  --bad:#b00000; --bad-bg:#ffffff; --bad-text:#800000; --bad-border:#b00000;
  --goal-bg:#c0c0c0; --goal-border:#808080; --chip-border:#000000;
  --overlay:rgba(0,0,0,.3);
  --ms:#000080; --ms-bg:#ffffff;
  --r-sm:0px; --r:0px; --r-lg:0px; --r-pill:0px; --r-tail:0px;
  --sans: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  --raised: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --sunken: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --titlebar: linear-gradient(90deg, #000080, #1084d0);
}
[data-skin="retro"] *{animation-timing-function:steps(4, end) !important; transition-timing-function:steps(3, end) !important;}
/* v125: the manager's words appear without the blur here — stepped, the blur stayed on some words on a phone
   (owner: "some text in the chat is blurred and hard to read") */
[data-skin="retro"] .msg .w{animation-name:fade-in;}
[data-skin="retro"] .page-header, [data-skin="retro"] .chat-header, [data-skin="retro"] .subpage-head, [data-skin="retro"] .drawer-head{
  background:var(--titlebar); color:#fff; border-bottom:none;
}
[data-skin="retro"] .ph-title{font-size:20px; font-weight:700; letter-spacing:0;}
[data-skin="retro"] .ph-sub, [data-skin="retro"] .hdr-status{color:#dfe6ff;}
[data-skin="retro"] .hdr-status.typing{color:#fff;}
[data-skin="retro"] .back-btn, [data-skin="retro"] .subpage-head .text-btn{color:#fff;}
[data-skin="retro"] .ph-progress{height:4px; background:#c0c0c0;}
[data-skin="retro"] .ph-progress i{background:repeating-linear-gradient(90deg, #000080 0 7px, transparent 7px 9px); border-radius:0;}
/* Buttons: bevelled grey, pressed = sunken */
[data-skin="retro"] .primary-btn, [data-skin="retro"] .ghost-btn, [data-skin="retro"] .reset-btn, [data-skin="retro"] .icon-btn,
[data-skin="retro"] .qr-chip, [data-skin="retro"] .composer button, [data-skin="retro"] .settings-row,
[data-skin="retro"] .onb-arch, [data-skin="retro"] .icon-cell, [data-skin="retro"] .seg button, [data-skin="retro"] .drawer-head button,
[data-skin="retro"] .status-badge, [data-skin="retro"] .switch-row{
  background:#c0c0c0; color:#000; border:none; border-radius:0; box-shadow:var(--raised);
}
[data-skin="retro"] .primary-btn{font-weight:700; box-shadow:0 0 0 1px #000, var(--raised);}
[data-skin="retro"] .danger-btn{color:#b00000;}
[data-skin="retro"] .primary-btn:active, [data-skin="retro"] .ghost-btn:active, [data-skin="retro"] .reset-btn:active, [data-skin="retro"] .icon-btn:active,
[data-skin="retro"] .qr-chip:active, [data-skin="retro"] .composer button:active, [data-skin="retro"] .settings-row:active,
[data-skin="retro"] .seg button.active, [data-skin="retro"] .icon-cell.on,
[data-skin="retro"] .onb-arch.on{
  box-shadow:var(--sunken); transform:none; background:#c0c0c0; color:#000;
}
[data-skin="retro"] .icon-cell.on, [data-skin="retro"] .onb-arch.on{background:#d4d4d4; outline:1px dotted #000; outline-offset:-5px;}
[data-skin="retro"] .seg{border:none; gap:4px;}
[data-skin="retro"] .seg button + button{border-left:none;}
[data-skin="retro"] .page-header .icon-btn{color:#000;}
[data-skin="retro"] .status-badge.done{color:#007a00; font-weight:700;}
[data-skin="retro"] .status-badge.not_done{color:#b00000; font-weight:700;}
[data-skin="retro"] .status-badge.partial{color:#000080; font-weight:700;}
[data-skin="retro"] .status-badge.dropped{color:#555; box-shadow:none; border:1px dashed #808080;}
/* Fields: white and sunken */
[data-skin="retro"] input[type=text], [data-skin="retro"] input[type=password], [data-skin="retro"] textarea, [data-skin="retro"] select,
[data-skin="retro"] .composer textarea{
  background:#fff; border:none; border-radius:0; box-shadow:var(--sunken);
}
[data-skin="retro"] .switch{border-radius:0; box-shadow:var(--sunken); background:#fff;}
[data-skin="retro"] .switch::after{border-radius:0; background:#c0c0c0; box-shadow:var(--raised);}
[data-skin="retro"] .switch:checked{background:#000080;}
/* The chat sits on the teal desktop; the manager talks in little windows, you in yellow notes */
[data-skin="retro"] .messages{background:#008080;}
[data-skin="retro"] .msg.agent{background:#c0c0c0; border:none; box-shadow:var(--raised); color:#000;}
[data-skin="retro"] .msg.user{background:#ffffe1; border:1px solid #000; color:#000;}
[data-skin="retro"] .msg.system-note{color:#fff;}
[data-skin="retro"] .action-card{background:#fff; box-shadow:var(--sunken); border:none; border-left:6px solid var(--ok);}
[data-skin="retro"] .action-card.goal{border-left-color:#000080;}
[data-skin="retro"] .action-card.bad{border-left-color:#b00000;}
[data-skin="retro"] .chat-empty p, [data-skin="retro"] .chat-empty b{color:#fff;}
[data-skin="retro"] .composer, [data-skin="retro"] .composer-limit{background:#c0c0c0; border-top:1px solid #fff;}
[data-skin="retro"] .quick-replies{background:#008080;}
/* Taskbar */
[data-skin="retro"] .tabbar{background:#c0c0c0; border-top:none; box-shadow:inset 0 1px #dfdfdf, inset 0 2px #fff;}
[data-skin="retro"] .tabbar button{color:#000; margin:4px 2px; height:calc(var(--tabbar-h) - 8px);}
[data-skin="retro"] .tabbar button.active{box-shadow:var(--sunken); background:#d4d4d4; color:#000;}
[data-skin="retro"] .tabbar svg, [data-skin="retro"] .icon-btn svg, [data-skin="retro"] .ico{stroke-linecap:square; stroke-linejoin:miter; stroke-width:2;}
/* Goal = a window */
[data-skin="retro"] .goal-card{background:#c0c0c0; border:none; box-shadow:var(--raised); padding:3px 3px 10px;}
[data-skin="retro"] .gc-bar{background:var(--titlebar); padding:3px 3px 3px 6px; margin-bottom:10px;}
[data-skin="retro"] .gc-kicker{color:#fff; letter-spacing:0; text-transform:none; font-size:13px;}
[data-skin="retro"] .gc-kicker::after{content:".exe";}
[data-skin="retro"] .gc-winbtns{display:flex; gap:2px;}
[data-skin="retro"] .gc-winbtns i{width:16px; height:14px; background:#c0c0c0; box-shadow:var(--raised); position:relative;}
[data-skin="retro"] .gc-winbtns i::after{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 10px/1 Tahoma, sans-serif; color:#000; font-style:normal;}
[data-skin="retro"] .gc-winbtns i:nth-child(1)::after{content:"_"; align-items:flex-start;}
[data-skin="retro"] .gc-winbtns i:nth-child(2)::after{content:"□";}
[data-skin="retro"] .gc-winbtns i:nth-child(3){margin-left:2px;}
[data-skin="retro"] .gc-winbtns i:nth-child(3)::after{content:"×"; font-size:12px;}
[data-skin="retro"] .gc-main{padding:0 8px;}
[data-skin="retro"] .goal-ico{background:#fff; color:#000080; box-shadow:var(--sunken);}
[data-skin="retro"] .ring-bg{stroke:#fff;}
[data-skin="retro"] .ring-fg{stroke:#000080; stroke-linecap:butt;}
[data-skin="retro"] .goal-card.done .ring-fg{stroke:#007a00;}
/* Milestones = folders in a tree view; tasks = rows of a list view */
[data-skin="retro"] .milestone-list:not(.editing) li::before{background:none; width:0; border-left:1px dotted #000;}
[data-skin="retro"] .milestone-list:not(.editing) li.reached::before{border-left-color:#007a00;}
[data-skin="retro"] .ms-node{border-radius:0; background:#ffe08a; border:none; color:#000; width:28px; height:22px; left:-41px; padding-top:3px;
  clip-path:polygon(0 18%, 38% 18%, 48% 0, 100% 0, 100% 100%, 0 100%); box-shadow:inset -1px -1px #806000;}
[data-skin="retro"] li.reached .ms-node{background:#9fe09f; color:#000; box-shadow:inset -1px -1px #006000;}
[data-skin="retro"] .milestone-list li, [data-skin="retro"] .task-list li{background:#fff; border:none; box-shadow:var(--sunken);}
[data-skin="retro"] .task-list li.done, [data-skin="retro"] .milestone-list li.reached{color:#005200;}
[data-skin="retro"] .task-list li.not_done{color:#800000;}
[data-skin="retro"] .ms-ico, [data-skin="retro"] .task-ico{background:#c0c0c0; border:none; box-shadow:var(--raised); color:#000080;}
[data-skin="retro"] .ms-label, [data-skin="retro"] .section-kicker{letter-spacing:0;}
/* Sheets, toast, cards */
[data-skin="retro"] .drawer{background:#c0c0c0; border:none; box-shadow:var(--raised);}
[data-skin="retro"] .drawer-head strong{color:#fff;}
[data-skin="retro"] .drawer-head button{width:24px; height:22px; padding:0; font-size:13px; font-weight:700;}
[data-skin="retro"] .toast{background:#ffffe1; color:#000; border:1px solid #000; box-shadow:2px 2px 0 rgba(0,0,0,.5);}
[data-skin="retro"] .toast button{color:#000080; text-decoration:underline;}
[data-skin="retro"] .lvl-card, [data-skin="retro"] .streak-card, [data-skin="retro"] .stat, [data-skin="retro"] .ach, [data-skin="retro"] .soon-card,
[data-skin="retro"] .j-goal, [data-skin="retro"] .manual-form{background:#c0c0c0; border:none; box-shadow:var(--raised);}
[data-skin="retro"] .lvl-bar, [data-skin="retro"] .ach-prog{background:#fff; border:none; box-shadow:var(--sunken); border-radius:0;}
[data-skin="retro"] .lvl-bar i{background:repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); border-radius:0;}
[data-skin="retro"] .lvl-rank{color:#000080;}
[data-skin="retro"] .goose-says span{background:#ffffe1; border:1px solid #000;}
[data-skin="retro"] .onb-dots i.on{border-radius:0;}

/* ================= SKIN: MEDIEVAL (parchment, wood and wax) =================
   The goal is a scroll, milestones are shields on a map route, tasks are lines on parchment,
   statuses are wax seals. Book-style serif, small caps for headings. */
html:root[data-skin="medieval"]{
  color-scheme: light;
  --bg:#efe2c4; --panel:#f5ead0; --panel-2:#fbf4e2; --line:#c9ab74;
  --text:#2e2113; --muted:#76603f;
  --accent:#8c1c13; --accent-fill:#8c1c13; --on-accent:#f8ecd0; --accent-dim:#ecd5a8;
  --user-text:#4a1a10;
  --ok:#3f6b2a; --ok-bg:rgba(63,107,42,.10); --ok-text:#2c4d1d; --ok-border:#a9bf8e;
  --bad:#a3271b; --bad-bg:rgba(163,39,27,.08); --bad-text:#7a1d14; --bad-border:#d9a79c;
  --goal-bg:rgba(184,137,43,.16); --goal-border:#b8892b; --chip-border:#b8892b;
  --overlay:rgba(40,25,10,.45);
  --ms:#8c1c13; --ms-bg:rgba(140,28,19,.08);
  --gold:#b8892b; --gold-light:#f0d28a; --wood:linear-gradient(#4d3420, #3b2817);
  --r-sm:3px; --r:5px; --r-lg:7px; --r-pill:12px; --r-tail:2px;
  --sans: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Georgia, serif;
}
[data-skin="medieval"] body{background:radial-gradient(ellipse at 50% 40%, #f6ecd3 35%, #e4d0a2 100%);}
[data-skin="medieval"] .ph-title, [data-skin="medieval"] .onb h2, [data-skin="medieval"] .prog-h,
[data-skin="medieval"] .ach-h, [data-skin="medieval"] .cel-name, [data-skin="medieval"] .drawer-head strong, [data-skin="medieval"] .subpage-head strong,
[data-skin="medieval"] .hdr-name, [data-skin="medieval"] .primary-btn, [data-skin="medieval"] .gc-kicker, [data-skin="medieval"] .section-kicker,
[data-skin="medieval"] .ms-label, [data-skin="medieval"] .status-badge, [data-skin="medieval"] .tabbar button{font-variant:small-caps; letter-spacing:.04em;}
[data-skin="medieval"] .gc-kicker, [data-skin="medieval"] .section-kicker, [data-skin="medieval"] .ms-label{text-transform:none; font-size:13px;}
/* Wooden headers and tab bar with a gold double rule */
[data-skin="medieval"] .page-header, [data-skin="medieval"] .chat-header, [data-skin="medieval"] .subpage-head, [data-skin="medieval"] .drawer-head{
  background:var(--wood); color:#f3e2b8; border-bottom:3px double var(--gold);
}
[data-skin="medieval"] .ph-title{color:var(--gold-light); font-weight:600;}
[data-skin="medieval"] .ph-sub, [data-skin="medieval"] .hdr-status{color:#d8c49a;}
[data-skin="medieval"] .hdr-status.typing{color:var(--gold-light);}
[data-skin="medieval"] .subpage-head .back-btn, [data-skin="medieval"] .subpage-head .text-btn, [data-skin="medieval"] .drawer-head button{color:var(--gold-light);}
[data-skin="medieval"] .page-header .icon-btn{background:transparent; border-color:var(--gold); color:var(--gold-light);}
[data-skin="medieval"] .ph-progress i{background:linear-gradient(90deg, #b8892b, #f0d28a);}
[data-skin="medieval"] .tabbar{background:var(--wood); border-top:3px double var(--gold);}
[data-skin="medieval"] .tabbar button{color:#cdb27a;}
[data-skin="medieval"] .tabbar button.active{color:var(--gold-light);}
/* Buttons: crimson with a gold edge; quiet ones — ink outline */
[data-skin="medieval"] .primary-btn, [data-skin="medieval"] .composer button{border:1px solid var(--gold); box-shadow:inset 0 0 0 1px rgba(240,210,138,.35), 0 1px 2px rgba(60,30,10,.3);}
[data-skin="medieval"] .ghost-btn, [data-skin="medieval"] .reset-btn{border-color:var(--gold); color:var(--text);}
[data-skin="medieval"] .qr-chip{border-color:var(--gold); color:var(--accent); background:rgba(251,244,226,.7);}
[data-skin="medieval"] .qr-chip.accent{background:var(--accent-fill); color:var(--on-accent);}
/* Chat */
[data-skin="medieval"] .msg.agent{background:#fbf4e2; border-color:var(--line); box-shadow:0 1px 3px rgba(80,50,20,.15);}
[data-skin="medieval"] .msg.user{background:#ecd5a8; border:1px solid #d6b77c;}
[data-skin="medieval"] .composer, [data-skin="medieval"] .composer-limit{background:#f0e2c0; border-top:1px solid var(--gold);}
[data-skin="medieval"] .msg.agent.anim-in, [data-skin="medieval"] .action-card.anim-in{animation-name:ink-in;}
@keyframes ink-in{from{opacity:0; filter:blur(3px);} to{opacity:1; filter:none;}}
/* Goal = a scroll with wooden rollers, unfurling when it appears */
[data-skin="medieval"] .goal-card{
  margin:16px 8px 6px; padding:22px 16px; text-align:center; border:none; border-left:1px solid #d9c08c; border-right:1px solid #d9c08c;
  border-radius:0; background:linear-gradient(90deg, rgba(150,110,50,.12), transparent 12%, transparent 88%, rgba(150,110,50,.12)), #fbf4e2;
  transform-origin:50% 0; animation:unfurl .6s cubic-bezier(.2,.8,.2,1);
}
[data-skin="medieval"] .goal-card::before, [data-skin="medieval"] .goal-card::after{
  content:""; position:absolute; left:-9px; right:-9px; height:14px; border-radius:7px;
  background:linear-gradient(#7a5530, #c9a06a 45%, #6b4626); box-shadow:0 2px 3px rgba(60,30,10,.35);
}
[data-skin="medieval"] .goal-card::before{top:-7px;}
[data-skin="medieval"] .goal-card::after{bottom:-7px;}
@keyframes unfurl{from{transform:scaleY(.12); opacity:.2;} to{transform:none; opacity:1;}}
[data-skin="medieval"] .gc-bar{justify-content:center;}
[data-skin="medieval"] .gc-kicker::before{content:"❧ ";}
[data-skin="medieval"] .gc-kicker::after{content:" ☙";}
[data-skin="medieval"] .gc-main{flex-direction:column; gap:10px;}
[data-skin="medieval"] .goal-card .goal-title{font-size:22px; font-weight:600;}
/* the goal's icon — a wax seal */
[data-skin="medieval"] .goal-ico{width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #c0402f, #7a140c 70%); color:var(--gold-light); box-shadow:0 2px 5px rgba(60,20,10,.45), inset 0 0 0 3px rgba(0,0,0,.12);}
[data-skin="medieval"] .ring-bg{stroke:#e6d3a8;}
[data-skin="medieval"] .ring-fg{stroke:var(--gold);}
/* Milestones = shields along a dashed map route */
[data-skin="medieval"] .milestone-list:not(.editing) li::before{background:repeating-linear-gradient(to bottom, var(--gold) 0 5px, transparent 5px 9px);}
[data-skin="medieval"] .milestone-list:not(.editing) li.reached::before{background:repeating-linear-gradient(to bottom, var(--ok) 0 5px, transparent 5px 9px);}
[data-skin="medieval"] .ms-node{
  border:none; border-radius:0; width:28px; height:32px; left:-41px; padding-bottom:5px;
  clip-path:polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); background:linear-gradient(#a32a1c, #6f130b); color:var(--gold-light); font-weight:700;
}
[data-skin="medieval"] li.reached .ms-node{background:linear-gradient(#e2bd62, #a8781f); color:#2e2113;}
[data-skin="medieval"] .milestone-list li{background:#fbf4e2; border-color:var(--line);}
[data-skin="medieval"] .ms-ico{background:transparent; border:1px solid var(--line);}
/* Tasks = lines on parchment; statuses = wax seals */
[data-skin="medieval"] .task-list:not(.editing){gap:0;}
[data-skin="medieval"] .task-list:not(.editing) li, [data-skin="medieval"] .task-list:not(.editing) li.done,
[data-skin="medieval"] .task-list:not(.editing) li.not_done{background:transparent; border:none; border-bottom:1px solid rgba(118,96,63,.35); border-radius:0; padding:10px 2px;}
[data-skin="medieval"] .task-list li.done .task-text{color:var(--ok-text);}
[data-skin="medieval"] .task-ico{background:transparent; border:none; color:var(--muted);}
[data-skin="medieval"] .status-badge{border-radius:14px; font-weight:600; font-size:13px;}
[data-skin="medieval"] .status-badge.pending{background:transparent; border:1px dashed var(--gold); color:var(--muted);}
[data-skin="medieval"] .status-badge.done{background:radial-gradient(circle at 35% 30%, #c0402f, #7a140c 75%); color:var(--gold-light); box-shadow:0 1px 3px rgba(60,20,10,.4);}
[data-skin="medieval"] .status-badge.not_done{background:#5b4636; color:#f3e2b8;}
[data-skin="medieval"] .status-badge.partial{background:linear-gradient(#e2bd62, #a8781f); color:#2e2113;}
/* Sheets, cards, toast */
[data-skin="medieval"] .drawer{background:#f5ead0; border-top:none;}
[data-skin="medieval"] .toast{background:#3b2817; color:#f3e2b8; border:1px solid var(--gold);}
[data-skin="medieval"] .toast button{color:var(--gold-light);}
[data-skin="medieval"] .lvl-card, [data-skin="medieval"] .streak-card{background:#fbf4e2; border:1px solid var(--gold);}
[data-skin="medieval"] .lvl-bar i{background:linear-gradient(90deg, #8c1c13, #c0402f);}
[data-skin="medieval"] .lvl-rank{color:var(--accent);}
[data-skin="medieval"] .switch:checked{background:var(--accent-fill);}

/* Settings sections, shop and eggs in the two skins */
[data-skin="retro"] .set-menu{background:#fff; border:none; box-shadow:var(--sunken);}
[data-skin="retro"] .set-row + .set-row{border-top:1px dotted #808080;}
[data-skin="retro"] .set-row:active{background:#000080; color:#fff;}
[data-skin="retro"] .ph-back{color:#fff;}
[data-skin="retro"] .danger-zone{background:#fff; border:2px solid #b00000;}
[data-skin="retro"] .egg-card, [data-skin="retro"] .wallet, [data-skin="retro"] .gift-row, [data-skin="retro"] .shop-item, [data-skin="retro"] .egg-rules{background:#c0c0c0; border:none; box-shadow:var(--raised);}
[data-skin="retro"] .shop-item.chosen{outline:1px dotted #000; outline-offset:-5px;}
[data-skin="retro"] .egg-pop{background:#ffffe1; border:1px solid #000; box-shadow:2px 2px 0 rgba(0,0,0,.5);}
[data-skin="medieval"] .ph-back{color:var(--gold-light);}
[data-skin="medieval"] .set-menu, [data-skin="medieval"] .egg-rules{background:#fbf4e2; border-color:var(--gold);}
[data-skin="medieval"] .set-txt b{font-variant:small-caps; letter-spacing:.03em; font-size:16px;}
[data-skin="medieval"] .egg-card, [data-skin="medieval"] .wallet, [data-skin="medieval"] .gift-row{background:#fbf4e2; border-color:var(--gold);}
[data-skin="medieval"] .shop-item{background:#fbf4e2;}
[data-skin="medieval"] .shop-act{font-variant:normal; letter-spacing:0;}
[data-skin="medieval"] .egg-pop{background:#3b2817; color:var(--gold-light); border-color:var(--gold);}