/* HeatherOS shared CSS control family, SDK 0.2.4.
   Buttons/tiles use these declarations; PNGs remain content/icons or Media Player art. */
:root {
  --title-active-start:#823b65;
  --title-active-middle:#9b4c77;
  --title-active-end:#b35d89;
  --title-inactive-start:#74667f;
  --title-inactive-end:#a18aab;
  --menu-gradient-start:#64186b;
  --menu-gradient-middle:#8e257d;
  --menu-gradient-end:#d94ab1;
  --login-title-start:#bc519f;
  --login-title-end:#e6a4c8;
  --login-button-start:#ff97e0;
  --login-button-end:#da1da7;
  --boot-progress-start:#ff9be6;
  --boot-progress-end:#e930c2;
  --start-normal-top:#fc7dbe;
  --start-normal-bottom:#fc6eb8;
  --start-hover-top:#ff91ca;
  --start-hover-bottom:#fc77bb;
  --start-pressed-top:#ed58a9;
  --start-pressed-bottom:#fc77bb;
  --status-face:#c4c4c4;
  --status-text:#211c26;
  --status-shadow:#808080;
  --status-light:#ffffff;

  --ui-button-normal:#c4c4c4;
  --ui-content-background:#ffffff;
  /* Original Start PNG background sampled away from its text/heart. */
  --start-fill:linear-gradient(var(--start-normal-top),var(--start-normal-bottom));
  --start-fill-hover:linear-gradient(var(--start-hover-top),var(--start-hover-bottom));
  --start-fill-pressed:linear-gradient(var(--start-pressed-top),var(--start-pressed-bottom));
  --start-edge-light:#fedcf3;
  --start-edge-shadow:#bd1e7b;
  --ui-scrollbar-size:16px;
  --ui-scrollbar-track:#ded3df;
  --ui-scrollbar-thumb:#ed58ca;
  --ui-scrollbar-thumb-hover:#f176d4;
  --ui-scrollbar-edge:#f4c7ed;
  --ui-scrollbar-arrow:#61214e;
  --ui-button-hover:#d4c6d2;
  --ui-button-pressed:#b7aebc;
  --ui-button-light:#fff;
  --ui-button-shadow:#46414b;
  --ui-button-recessed:#e7dce5;
  --ui-button-recessed-edge:#c4adbf;
  --ui-button-focus:#702752;
  --ui-button-disabled:#777;
  --game-digit-1:#3b55ba;--game-digit-2:#2a7c61;--game-digit-3:#b43269;
  --game-digit-4:#763ea0;--game-digit-5:#8c4f30;--game-digit-6:#16818d;
  --game-digit-7:#39273c;--game-digit-8:#777;--game-digit-9:#8c3d60;
  --game-digit-clue:#333;--game-digit-locked:#777;
}
/* Exceptions are content and flat navigation, never a separate button skin. */
:is(button,.heather-button):not(:where(.hp-surface *, .desktop-icon,.file-item,.tree-row,.file-entry,.swatch,.resize-handle,.hs-card,.hs-slot,.hs-menu-button,.hs-menu-item,.menu-root,.menubar *,.toolbar *,.popup *,[role^="menuitem"],.explorer-file)) {
  box-sizing:border-box;border:2px solid;border-radius:0;
  border-color:var(--ui-button-light) var(--ui-button-shadow) var(--ui-button-shadow) var(--ui-button-light);
  background:var(--ui-button-background,var(--ui-button-normal));background-image:none;
  box-shadow:none;text-shadow:none;
}
:is(button,.heather-button):not(:where(.hp-surface *, .desktop-icon,.file-item,.tree-row,.file-entry,.swatch,.resize-handle,.hs-card,.hs-slot,.hs-menu-button,.hs-menu-item,.menu-root,.menubar *,.toolbar *,.popup *,[role^="menuitem"],.explorer-file)):hover:not(:disabled):not([data-ui-state="recessed"]) {
  background-color:var(--ui-button-background,var(--ui-button-hover));
}
:is(button,.heather-button):not(:where(.hp-surface *, .desktop-icon,.file-item,.tree-row,.file-entry,.swatch,.resize-handle,.hs-card,.hs-slot,.hs-menu-button,.hs-menu-item,.menu-root,.menubar *,.toolbar *,.popup *,[role^="menuitem"],.explorer-file)):is(:active,.pressed,[aria-pressed="true"],[data-ui-state="pressed"],[data-ui-state="selected"],.tool.active) {
  border-color:var(--ui-button-shadow) var(--ui-button-light) var(--ui-button-light) var(--ui-button-shadow);
  background:var(--ui-button-background,var(--ui-button-pressed));box-shadow:none;
}
:is(button,.heather-button):not(:where(.hp-surface *)):is(:focus-visible,[data-ui-state="focused"]) {
  outline:1px dotted var(--ui-button-focus);outline-offset:-4px;
}
:is(button,.heather-button):not(:where(.hp-surface *)):is(:disabled,[data-ui-state="disabled"]) {
  color:var(--ui-button-disabled);cursor:default;filter:none;
}
:is(button,.heather-button)[data-ui-state="recessed"] {
  background:var(--ui-button-background,var(--ui-button-recessed));
  border:1px solid var(--ui-button-recessed-edge);box-shadow:none;
}
/* Flat controls use the same state tokens and bevel, with no resting frame. */
:is(.menubar button,.toolbar button,.menu-root,.hs-menu-button) {
  border:1px solid transparent;background:transparent;border-radius:0;
}
:is(.menubar button,.toolbar button,.menu-root,.hs-menu-button):hover {
  border-color:var(--ui-button-light) var(--ui-button-shadow) var(--ui-button-shadow) var(--ui-button-light);
  background:var(--ui-button-hover);
}
:is(.menubar button,.toolbar button,.menu-root,.hs-menu-button):is(:active,[aria-expanded="true"],.is-open) {
  border-color:var(--ui-button-shadow) var(--ui-button-light) var(--ui-button-light) var(--ui-button-shadow);
  background:var(--ui-button-pressed);
}
.start-button:is(:active,.pressed,[aria-expanded="true"])>* {transform:translate(1px,1px);}
.start-symbol {display:block;flex:none;width:28px;height:28px;object-fit:contain;image-rendering:pixelated;}
.dialog-actions button {min-width:78px;min-height:28px;padding:4px 12px;}
/* The board canvas now contains only Snake/food. Cells are real shared CSS tiles. */
.snake-css-grid {position:absolute;inset:0;display:grid;grid-template:repeat(20,minmax(0,1fr))/repeat(20,minmax(0,1fr));pointer-events:none;}
.snake-css-grid>.heather-button {min-width:0;min-height:0;padding:0;}
.snake-board-wrap>canvas {position:relative;background:transparent;}
.mine-cell.exploded {--ui-button-background:#f178a6;}
:is(.game-digit-1,.mine-cell.n1){color:var(--game-digit-1)}
:is(.game-digit-2,.mine-cell.n2){color:var(--game-digit-2)}
:is(.game-digit-3,.mine-cell.n3){color:var(--game-digit-3)}
:is(.game-digit-4,.mine-cell.n4){color:var(--game-digit-4)}
:is(.game-digit-5,.mine-cell.n5){color:var(--game-digit-5)}
:is(.game-digit-6,.mine-cell.n6){color:var(--game-digit-6)}
:is(.game-digit-7,.mine-cell.n7){color:var(--game-digit-7)}
:is(.game-digit-8,.mine-cell.n8){color:var(--game-digit-8)}
.game-digit-9{color:var(--game-digit-9)}
.game-digit-clue{color:var(--game-digit-clue)}
.game-digit-locked{color:var(--game-digit-locked)}

/* Native browser scrollbars, shared by the desktop and hosted applications.
   The browser retains wheel, keyboard, touch and thumb-drag behaviour. */
:where(*) {scrollbar-width:auto;scrollbar-color:var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);}
@supports selector(::-webkit-scrollbar) {
  /* A non-auto standard colour would override these detailed native parts. */
  :where(*) {scrollbar-color:auto;}
  ::-webkit-scrollbar {width:var(--ui-scrollbar-size);height:var(--ui-scrollbar-size);}
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner {background:var(--ui-scrollbar-track);}
  ::-webkit-scrollbar-thumb {background:var(--ui-scrollbar-thumb);border:2px outset var(--ui-scrollbar-edge);min-height:24px;min-width:24px;}
  ::-webkit-scrollbar-thumb:hover {background:var(--ui-scrollbar-thumb-hover);}
  ::-webkit-scrollbar-thumb:active {background:var(--ui-scrollbar-thumb);border-style:inset;}
  ::-webkit-scrollbar-button {display:none;background-color:var(--ui-button-normal);border:2px outset var(--ui-button-light);height:var(--ui-scrollbar-size);width:var(--ui-scrollbar-size);background-repeat:no-repeat;background-position:center;}
  ::-webkit-scrollbar-button:vertical:start:decrement {display:block;background-image:conic-gradient(from 135deg at 50% 0,var(--ui-scrollbar-arrow) 90deg,transparent 0);background-size:8px 5px;}
  ::-webkit-scrollbar-button:vertical:end:increment {display:block;background-image:conic-gradient(from 315deg at 50% 100%,var(--ui-scrollbar-arrow) 90deg,transparent 0);background-size:8px 5px;}
  ::-webkit-scrollbar-button:horizontal:start:decrement {display:block;background-image:conic-gradient(from 45deg at 0 50%,var(--ui-scrollbar-arrow) 90deg,transparent 0);background-size:5px 8px;}
  ::-webkit-scrollbar-button:horizontal:end:increment {display:block;background-image:conic-gradient(from 225deg at 100% 50%,var(--ui-scrollbar-arrow) 90deg,transparent 0);background-size:5px 8px;}
  ::-webkit-scrollbar-button:active {border-style:inset;}
}
@media (forced-colors:active) {
  :where(*) {scrollbar-color:auto;}
  .start-button {--ui-button-background:ButtonFace;--ui-button-light:ButtonText;--ui-button-shadow:ButtonText;color:ButtonText;}
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner {background:Canvas;}
  ::-webkit-scrollbar-thumb {background:ButtonFace;border:2px solid ButtonText;}
  ::-webkit-scrollbar-button {background-color:ButtonFace;--ui-scrollbar-arrow:ButtonText;border-color:ButtonText;}
}

/* Settings uses the shared native control family. */
.theme-settings { margin: 12px 0; padding: 8px 12px 12px; min-width: 0; }
.theme-settings p { overflow-wrap: anywhere; margin: 4px 0 10px; }
.theme-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.session-lost {position:fixed;z-index:2147483647;top:0;left:0;right:0;padding:12px 20px;background:#fff4fb;color:#501f43;border-bottom:2px solid #9e3a77;font:16px/1.4 sans-serif;}

/* Windows 98-style passive status panels. All standard apps share this family. */
.statusbar.sdk-statusbar, #statusbar.sdk-statusbar {
 display:flex;align-items:stretch;gap:3px;flex:0 0 auto;
 box-sizing:border-box;min-width:0;height:26px;min-height:26px;
 margin:2px 0 0;padding:2px 0 0;border:0;
 background:var(--status-face);color:var(--status-text);
 font-size:14px;line-height:18px;white-space:nowrap;overflow:hidden;
}
.statusbar.sdk-statusbar>.status-panel, #statusbar.sdk-statusbar>.status-panel {
 box-sizing:border-box;display:block;flex:0 0 auto;min-width:0;
 padding:1px 5px;border:1px solid;
 border-color:var(--status-shadow) var(--status-light) var(--status-light) var(--status-shadow);
 font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.statusbar.sdk-statusbar>.status-message, #statusbar.sdk-statusbar>#hint {flex:1 1 0;width:auto;}
.statusbar.sdk-statusbar::after {
 content:"";flex:0 0 13px;align-self:flex-end;height:13px;pointer-events:none;
 background:repeating-linear-gradient(135deg,transparent 0 2px,var(--status-shadow) 2px 3px,var(--status-light) 3px 4px);
 clip-path:polygon(100% 0,100% 100%,0 100%);
}
.paint-host-status.sdk-statusbar>.status-coordinates, #statusbar.sdk-statusbar>#coordinates {flex:0 0 120px;width:120px;}
.paint-host-status.sdk-statusbar>.status-dimensions, #statusbar.sdk-statusbar>#dimensions {flex:0 0 140px;width:140px;}
.paint-host-status.sdk-statusbar>.status-zoom, #statusbar.sdk-statusbar>#zoom-readout {flex:0 0 60px;width:60px;}
.notepad-status>.status-size {flex:0 1 135px!important;}
.notepad-status>.status-characters {flex:0 1 160px!important;}
.notepad-status>.status-encoding {flex-basis:65px!important;}
.statusbar.sdk-statusbar>.status-location {flex:0 1 35%;}
.statusbar.sdk-statusbar>.snake-status-cell {flex:1 1 0;}
@media(max-width:600px) {
 #statusbar.sdk-statusbar {font-size:11px;}
 #statusbar.sdk-statusbar>#coordinates {flex-basis:80px;width:80px;}
 #statusbar.sdk-statusbar>#dimensions {flex-basis:100px;width:100px;}
 #statusbar.sdk-statusbar>#zoom-readout {flex-basis:45px;width:45px;}
}
@media(forced-colors:active) {
 .statusbar.sdk-statusbar {--status-face:Canvas;--status-text:CanvasText;--status-shadow:CanvasText;--status-light:Canvas;}
}

/* Classic shell: the rail width includes padding; menu content begins after it. */
.start-menu {--start-rail-width:52px;padding-left:calc(var(--start-rail-width) + 12px);}
.start-menu::before {box-sizing:border-box;width:var(--start-rail-width);padding:12px 8px;pointer-events:none;}
.start-menu>.menu-row {position:relative;}
/* Keep the original pink, with the flat face and hard double bevel of classic Start. */

.menu-row>.menu-shortcut {margin-left:18px;text-align:right;white-space:nowrap;flex:none;font:inherit;}

/* Shared marquee is a gesture overlay, never a drop destination or layout item. */
.file-grid {position:relative;}
.shortcuts,.file-grid {user-select:none;-webkit-user-select:none;touch-action:none;}
.selection-marquee {position:absolute;z-index:3;pointer-events:none;border:1px dotted var(--ui-button-shadow);background:rgba(179,93,137,.13);box-sizing:border-box;}
.menu-row[role^="menuitem"] {box-shadow:none;}

/* Drag copies keep the original icon silhouette and pointer offset. */
.icon-drag-layer{position:absolute;z-index:2147483647;pointer-events:none;opacity:.55;}
.icon-drag-copy{pointer-events:none!important;box-shadow:none!important;outline:none!important;border-color:transparent!important;background:transparent!important;}
.icon-drag-copy span{background:transparent!important;}
.icon-grid-slot{position:absolute;z-index:2147483646;pointer-events:none;box-sizing:border-box;border:2px dotted var(--ui-button-shadow,#823b65);background:rgba(179,93,137,.12);}
.file-grid:not(.details){grid-auto-rows:120px;}
.file-grid.has-videos:not(.details){grid-auto-rows:210px;}
/* Native form values, shared SDK popup; no browser-owned dropdown skin. */
select:not([multiple]){appearance:none;border-radius:0;background-color:var(--ui-content-background,#ffffff);color:inherit;border:2px solid;border-color:var(--ui-button-shadow,#808080) var(--ui-button-light,#fff) var(--ui-button-light,#fff) var(--ui-button-shadow,#808080);padding:2px 19px 2px 4px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 9px) 50%,calc(100% - 5px) 50%;background-size:4px 4px;background-repeat:no-repeat;}
select[aria-expanded="true"]{outline:1px dotted var(--ui-button-shadow,#808080);outline-offset:-4px;}
.select-popup{max-height:600px;overflow-y:auto;}
#tool-options[hidden]{display:none!important;}

#size{padding-right:12px;padding-left:2px;background-position:calc(100% - 7px) 50%,calc(100% - 3px) 50%;}
/* A single system bevel surrounds the entire playable Snake area. */
.snake-content{display:block;padding:0;}
.snake-board-shell{width:100%;height:100%;padding:0;border:2px solid;border-color:var(--ui-button-shadow) var(--ui-button-light) var(--ui-button-light) var(--ui-button-shadow);background:var(--ui-button-recessed);}
.snake-board-wrap{width:100%;height:100%;border:0;}
.snake-board-wrap>canvas{width:100%;height:100%;}
/* Trusted Paint dialogs use the existing owned-window frame and system controls. */
.paint-dialog-window>.window-body{overflow:auto;}
.paint-owned-dialog[open]{display:block;position:static;inset:auto;margin:0;padding:14px;border:0;box-shadow:none;width:100%;max-width:none;max-height:none;background:transparent;color:inherit;font:inherit;}
.paint-owned-dialog>.dialog-title{display:none;}
.paint-owned-dialog .field{display:flex;align-items:center;gap:12px;margin:10px 0;}
.paint-owned-dialog .field>label{min-width:85px;}
.paint-owned-dialog input[type=number],.paint-owned-dialog input[type=text]{min-width:0;flex:1;width:100%;}
.paint-owned-dialog .dialog-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.paint-owned-dialog .dialog-error{color:#8b1949;}
.paint-owned-dialog .colour-editor{display:grid;grid-template-columns:80px 1fr;gap:12px;}
.paint-owned-dialog #custom-preview{width:78px;height:78px;border:2px solid var(--ui-button-shadow);}
.paint-owned-dialog .notice{font-size:.9em;}
input[type=range]{accent-color:var(--ui-scrollbar-thumb);}
/* Native spinbox behaviour, classic shared CSS arrows in every built-in app. */
.sdk-number{display:inline-flex;position:relative;align-items:stretch;min-width:0;vertical-align:middle;flex:1;}
.sdk-number>input[type=number]{appearance:textfield;-moz-appearance:textfield;width:100%;min-width:0;margin:0;padding-right:22px;box-sizing:border-box;}
.sdk-number>input::-webkit-inner-spin-button,.sdk-number>input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.sdk-number-arrows{position:absolute;right:2px;top:2px;bottom:2px;width:18px;display:flex;flex-direction:column;}
.sdk-number-step{flex:1;min-height:0!important;min-width:0!important;padding:0!important;margin:0!important;border-radius:0;display:grid;place-items:center;background:var(--ui-button-normal,#c4c4c4);border:1px solid;border-color:var(--ui-button-light,#fff) var(--ui-button-shadow,#808080) var(--ui-button-shadow,#808080) var(--ui-button-light,#fff);box-shadow:none!important;}
.sdk-number-step:active{border-color:var(--ui-button-shadow) var(--ui-button-light) var(--ui-button-light) var(--ui-button-shadow);}
.sdk-number-step::after{content:'';width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:3px solid currentColor;}
.sdk-number-step[data-direction="-1"]::after{border-bottom:0;border-top:3px solid currentColor;}
.sdk-number:has(input:disabled) .sdk-number-arrows,.sdk-number:has(input:read-only) .sdk-number-arrows{opacity:.45;pointer-events:none;}
.paint-owned-dialog[open]{box-sizing:border-box;padding:14px;}

/* Toolbar menus share the toolbar face; form dropdowns keep the Files content surface.
   Highlight/hover rules retain their existing pink selection colour. */
.explorer-split,.file-item {background-color:var(--ui-content-background,#ffffff);}
.menubar,.toolbar,.menu,.popup,.hs-menubar,.hs-menu-panel {background-color:var(--ui-button-normal,#c4c4c4);}
.menu-row:not(.is-highlighted),.popup>[role^="menuitem"]:not(:hover):not(:focus),.hs-menu-item:not(:hover):not(:focus) {background-color:var(--ui-button-normal,#c4c4c4);}
.select-popup,.select-popup .menu-row:not(.is-highlighted) {background-color:var(--ui-content-background,#ffffff);}
select option {background-color:var(--ui-content-background,#ffffff);color:#211c26;}

/* The viewer PNG has transparent framing. Enlarge its painted area to the
   standard icon footprint without changing menu rows or titlebar spacing. */
.icon[data-icon="image-viewer"] {transform:scale(1.45);image-rendering:pixelated;}

/* Start uses the same shared raised/pressed control family as task buttons. */
.start-button {--ui-button-background:var(--start-soft-normal,#e2d3dc);display:flex;align-items:center;justify-content:center;gap:5px;height:34px;min-height:34px;width:126px;padding:2px 6px;font:700 18px/1 Tahoma,"MS Sans Serif",sans-serif;color:#000;box-shadow:none;}
.start-button .start-symbol {width:46px;height:34px;object-fit:fill;margin-block:-3px;}
.start-button:hover {--ui-button-background:var(--start-soft-hover,#eadde5);}
.start-button:is(:active,.pressed,[aria-expanded="true"]) {--ui-button-background:var(--start-soft-pressed,#d2becb);border-color:var(--ui-button-shadow) var(--ui-button-light) var(--ui-button-light) var(--ui-button-shadow);box-shadow:none;}
.task-button {user-select:none;-webkit-user-select:none;}
.task-button.task-dragging {opacity:.5;}
.task-button.task-drop-before {box-shadow:inset 3px 0 var(--ui-button-focus);}
.task-button.task-drop-after {box-shadow:inset -3px 0 var(--ui-button-focus);}

/* Start and all nested flyouts share the taskbar face, like the classic shell. */
.taskbar,.start-menu,.start-menu .submenu {background-color:var(--ui-button-normal);}
.start-menu .menu-row:not(.is-highlighted) {background-color:var(--ui-button-normal);}
/* Sudoku owns board layout only; tile surfaces and digit colours are shared. */
.sudoku-window>.window-body{display:flex;flex-direction:column;overflow:hidden;}
.sudoku-area{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:10px;gap:8px;}
/* One canonical recessed board frame, including Minesweeper's original 3px bevel. */
.mine-board-frame,.heather-board-frame{border:3px solid;border-color:#a2829b #fff3fa #fff3fa #a2829b;}
.sudoku-board{box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:min(100%,420px);aspect-ratio:1;flex-shrink:0;gap:3px;padding:3px;background:var(--ui-button-normal);}
.sudoku-block{min-width:0;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:0;}
.sudoku-cell{font-family:inherit;font-weight:700;font-size:22px;line-height:1;min-width:0;min-height:0;padding:0;position:relative;}
.sudoku-cell[data-locked="true"]::after{content:'•';position:absolute;right:2px;bottom:0;font-size:11px;}
.sudoku-cell[aria-invalid="true"]{outline:2px dotted var(--game-digit-3);outline-offset:-5px;}
.sudoku-instructions{margin:0;font-size:12px;text-align:center;}

/* Keep the host gesture alive when a virtual file crosses a hosted app. */
.virtual-file-dragging iframe{pointer-events:none!important}