/* Waypoint's forest, paper and gold, with a little Windows 98 soul. */
:root {
  --forest: #174d3a;
  --forest-deep: #0b2f25;
  --forest-soft: #2f6c55;
  --mint: #e8f3eb;
  --cream: #f7f8f4;
  --gold: #f2b84b;
  --ink: #192e24;
  --muted: #64746a;
  --line: #d0dad0;
  --face: #edf0e7;
  --light: #e5eade;
  --hilite: #ffffff;
  --shadow: #a2b1a2;
  --dark: #506b58;
  --desktop: var(--cream);
  --title-a: var(--forest-deep);
  --title-b: var(--forest-soft);
  --select: var(--forest);
  --ui-font: 'Segoe UI', Tahoma, Arial, sans-serif;
}

body.studio98 {
  padding: 0;
  color: var(--ink);
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  background: var(--cream);
}
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

/* A compact app command bar; the nostalgia lives in the editing tools. */
.editor-app { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--face); }
.editor-topbar { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: var(--cream); flex-shrink: 0; }
.editor-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--forest); white-space: nowrap; flex-shrink: 0; }
.editor-brand > [data-icon] { display: inline-flex; }
.editor-brand-label { display: inline-flex; align-items: center; gap: 6px; font: 17px Georgia, serif; letter-spacing: -.4px; }
.document-title { min-width: 0; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 12px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--forest); text-align: left; font-size: 12px; font-weight: 600; }
.document-title:hover { background: var(--mint); }
.editor-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; }
.save-state { margin-right: 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.save-state::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border: 1px solid currentColor; border-radius: 50%; vertical-align: 1px; }
.editor-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid #b6c5b6; background: #fffef8; color: var(--forest); font-size: 11px; font-weight: 600; box-shadow: inset 1px 1px #fff, 0 1px 0 #d5ddcf; border-radius: 2px; }
.editor-button [data-icon] { display: inline-flex; }
.editor-button.primary { background: var(--gold); border-color: #c5902f; box-shadow: inset 1px 1px #ffda8a, 0 1px 0 #c5902f; color: var(--forest-deep); }
.editor-button:hover { background: var(--mint); }
.editor-button.primary:hover { background: #ffc966; }
.editor-button:active { box-shadow: inset 1px 1px #c3cfbc; }
.editor-status { display: flex; align-items: center; gap: 14px; min-width: 0; max-width: 50%; margin-left: auto; padding-inline: 9px; color: #71816a; font: 10px 'Courier New', monospace; white-space: nowrap; }
.status-context { min-width: 0; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.pointer-position { color: #8a9784; }
.rimu-link { color: var(--forest); text-decoration: none; font: 10px var(--ui-font); }
.rimu-link:hover { text-decoration: underline; }

/* Classic menus and bevelled editing controls. */
.menubar { align-items: center; min-height: 33px; padding: 0 7px; background: #f9faf5; }
.menu-title { padding: 6px 9px; font-size: 11px; }
.menu-title u { text-decoration: none; }
.panel-toggle { display: none; }
.menu-title:hover, .menu-title.open { background: #e5ecdf; }

.toolbar-row { min-height: 35px; padding: 3px 4px; border-top-color: #d5ddce; background: #eef1e7; }
.toolbar { gap: 3px; }
.tool { height: 27px; min-width: 28px; padding: 0 5px; border-radius: 2px; }
.tool svg { image-rendering: pixelated; }
.tool:hover { background: #fffef8; box-shadow: var(--thin-up); }
.tool:active, .tool.on { background: #d9e5cd; }
.tool.drop { min-width: 13px; width: 13px; padding: 0; }
.tool.txt { width: 28px; }
.grip { height: 19px; margin-right: 3px; }
.sep { height: 20px; margin: 0 5px; opacity: .6; }
.field { height: 26px; padding: 3px 7px; border: 1px solid #aebbab; box-shadow: inset 1px 1px #e0e7d9; background: #fffefb; border-radius: 2px; }
select.field { padding: 2px 5px; }
.font-select { width: 156px; }
.btn, .color-btn { min-height: 26px; }
.btn:not(:disabled):hover, .color-btn:hover { background: #fffef8; }
.btn.default { background: var(--gold); color: var(--forest-deep); }

/* Docked tool windows share their frame and title bar with dialogs. */
.main { gap: 0; padding-top: 0; border-top: 1px solid #b3c1ac; box-shadow: none; }
.panel, .dialog, .palette { padding: 3px; border: 0; border-radius: 0; background: var(--face); box-shadow: var(--raised); }
.panel { width: 250px; }
.props { width: 236px; }
.panel-title, .dialog .titlebar, .palette .titlebar { height: 26px; min-height: 26px; gap: 6px; padding: 3px 4px 3px 7px; border: 0; background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: #fff; font: bold 11px Tahoma, 'Segoe UI', sans-serif; }
.panel-title > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-close, .dialog .tb-btn, .palette .tb-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--face); color: var(--forest-deep); box-shadow: var(--raised); font: bold 10px Tahoma, sans-serif; line-height: 1; }
.panel-close:hover, .dialog .tb-btn:hover, .palette .tb-btn:hover { background: #fffef8; }
.panel-close:active, .dialog .tb-btn:active, .palette .tb-btn:active { box-shadow: var(--pressed); }
.panel-close:focus-visible, .dialog .tb-btn:focus-visible, .palette .tb-btn:focus-visible { outline-color: var(--gold); outline-offset: 1px; }
.tabs { gap: 3px; padding: 11px 11px 0; background: #eaf0e3; border-bottom: 1px solid #cbd6c3; }
.tab { flex: 1 0 auto; padding: 7px 8px 8px; margin: 0; border-radius: 3px 3px 0 0; background: #e3e9db; color: #61715e; font-size: 10px; box-shadow: inset 1px 1px #fff, inset -1px 0 #bcc9b4; }
.tab.active { padding: 7px 8px 9px; margin: 0 0 -1px; background: #f7f8f2; color: var(--forest); font-weight: 700; border-top: 2px solid var(--forest); }
.tab-body { padding: 16px 12px; background: #f7f8f2; box-shadow: none; scrollbar-color: #b6c4ae #f0f3eb; scrollbar-width: thin; }
.tab-body h4 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; color: var(--forest); font-size: 11px; font-weight: 650; }
.gallery-count { font: 9px 'Courier New', monospace; color: #7b8978; font-weight: normal; }
.gallery-description { margin: 0 0 14px; color: #788575; font-size: 10px; }
.tile-grid, .tile-grid.two { gap: 8px; }
.tile { min-height: 76px; padding: 7px 5px; gap: 6px; border: 1px solid #c8d3c0; background: #fffefb; box-shadow: inset 1px 1px #fff, 0 2px 0 #e0e7d7; border-radius: 3px; }
.tile:hover { outline: 1px solid var(--forest); outline-offset: 1px; background: #f2f7e9; }
.tile.wa { min-height: 77px; }
.tile.wa svg { height: 37px; }
.tile .tile-label { font-size: 9px; color: #6c7b65; }
.tile.active { background: #f9edcc; outline-color: var(--forest); }
.panel-hint { display: flex; gap: 7px; align-items: center; min-height: 39px; padding: 9px 12px; border-top: 1px solid #d7dfcf; background: #eef2e8; color: #66775e; font-size: 9px; }
.panel-hint > span { font-size: 19px; color: var(--forest); }
.docarea { padding: 0; box-shadow: none; background: #dfe8d7; }
.ruler, .ruler-corner { background: #e8eddf; border-color: #b6c3ae; }
.ruler svg { opacity: .62; }
.workspace { padding: 28px; background: radial-gradient(#839a762c .75px, transparent .75px) 0 0 / 12px 12px, #e0e8d9; }
#page { box-shadow: 0 2px 0 #a8b79f, 0 7px 16px #28472b22; }
.sel-box { outline-color: var(--forest); }
.handle { border-color: var(--forest); }
.handle.rot { background: var(--gold); border-color: var(--forest); }
.props-body { padding: 14px 12px; scrollbar-width: thin; scrollbar-color: #b6c4ae #f0f3eb; }
.props-body .empty { padding: 10px 3px 18px; text-align: center; color: #788673; font-size: 11px; line-height: 1.6; }
.props-body .empty svg { width: 24px; height: 24px; margin: 3px auto 10px; }
.props-body .empty p { margin: 0; }
fieldset { min-width: 0; margin-top: 16px; padding: 12px 8px 10px; border-color: #c6d2be; outline: none; box-shadow: none; }
legend { padding: 0 5px; color: #74816d; font-size: 9px; font-weight: 600; letter-spacing: .4px; }
.props-body .stack { gap: 5px; }
.props-body .stack > .btn { width: 100%; min-width: 0; height: 29px; padding: 0 8px; background: #fffefb; box-shadow: inset 1px 1px #fff; border: 1px solid #d5decd; color: #50654a; font-size: 10px; }
.props-body .stack > .btn:hover { background: #e7efdf; border-color: #a5b79b; }
.prop-row { gap: 5px; margin: 8px 0; }
.prop-row > label:first-child { width: 46px; font-size: 10px; color: #6d7d64; }
.prop-grid { font-size: 10px; gap: 7px 5px; }
.btn-row .btn { font-size: 10px; }
.mini-grid .tile { min-height: 39px; }
.menu, .palette { background: #f3f6ec; }
.menu-item { padding-top: 7px; padding-bottom: 7px; font-size: 11px; }
.menu-item .mi-key { color: #7b8c72; font-size: 10px; }
.menu-item:hover .mi-key { color: #cfdfc7; }

.dialog { box-shadow: var(--raised), 4px 4px 0 #0b2f2533, 0 16px 50px #0b2f2526; overflow: hidden; }
.palette { width: 184px; box-shadow: var(--raised), 3px 3px 0 #0b2f2533; }
.palette-body { padding: 6px 5px 5px; }
.dialog-body { padding: 19px 16px; }
.dialog-buttons { padding: 0 16px 16px; gap: 9px; }
.dialog .btn { min-height: 29px; }
.about-logo { color: var(--forest); text-shadow: 2px 2px #dce8cf; }
.toast { bottom: 20px; background: #fff6d9; border-color: #b5a76e; color: var(--forest-deep); padding: 10px 15px; box-shadow: 2px 2px 0 #d7cfab; }

@media (min-width: 1500px) {
  .panel { width: 270px; }
  .props { width: 250px; }
}
@media (max-width: 1250px) {
  .pointer-position { display: none; }
}
@media (max-width: 1100px) {
  .panel { top: 0; bottom: 0; width: 260px; box-shadow: var(--raised), 4px 0 18px #193c2926; }
  .props { box-shadow: var(--raised), -4px 0 18px #193c2926; }
  .save-state { display: none; }
  .panel-toggle { display: inline-block; color: var(--forest); font-weight: 650; }
  .menubar { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .status-context { max-width: 150px; }
}
@media (max-width: 760px) {
  .editor-topbar { gap: 8px; min-height: 44px; padding: 7px 9px; }
  .editor-brand-label { display: none; }
  .document-title { max-width: none; flex: 1; padding: 6px 3px; border: 0; font-size: 11px; }
  .editor-actions { gap: 5px; margin-left: 0; }
  .editor-button { padding-inline: 9px; font-size: 10px; }
  .secondary-action, .action-label { display: none; }
  .editor-status { max-width: none; gap: 0; flex-shrink: 0; padding-inline: 7px; }
  .status-context, .rimu-link { display: none; }
}
@media (max-width: 420px) {
  .menu-title { flex-shrink: 0; padding-inline: 7px; font-size: 10px; }
}