/* Lab Desktop theme: every page in this copy loads it. The two tools load it
   after their own stylesheet, which still draws the calculators themselves;
   this file only turns their page shell into a window.
   Variables use their own names on purpose: the tool CSS already owns --ink,
   --line and --accent with different meanings, and redefining them here would
   repaint the calculators. */
:root {
  --mint: #F0FDF4; --forest: #14532D; --forest-2: #166534;
  --text: #1F2937; --text-2: #374151; --text-3: #4B5563; --soft: #6B7280;
  --green: #16A34A; --green-d: #15803D; --rule: #DCFCE7; --rule-2: #BBF7D0; --glow: #86EFAC;
  --amber-bg: #FFFBEB; --amber-line: #FDE68A; --amber-ink: #78350F; --amber-btn: #92400E;
  --serif: 'Lora', serif; --sans: 'Public Sans', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --win-shadow: 0 24px 48px -16px rgba(20,83,45,.22), 0 2px 6px rgba(20,83,45,.06);
}
* { box-sizing: border-box; }
body.desk { margin: 0; padding: 0; font: 15px/1.5 var(--sans); color: var(--text); -webkit-font-smoothing: antialiased;
  background-color: var(--mint);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 28px 28px; }
[hidden] { display: none !important; }
:where(body.desk) a { color: var(--green-d); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.ms { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: 'liga';
  user-select: none; flex: none; display: inline-block; }

/* ------------------------------------------------------------ desktop -- */
/* Laptop and up: the page is exactly one screen; windows scroll inside, and
   the dock stands as a rail on the left so windows get the full height. */
.desk-frame { display: grid; grid-template-rows: 44px minmax(0,1fr) auto; min-height: 100dvh; }
@media (min-width: 1024px) and (min-height: 560px) {
  body.desk { overflow: hidden; }
  .desk-frame { height: 100dvh; grid-template-columns: auto minmax(0,1fr); grid-template-rows: 44px minmax(0,1fr); }
  .menubar { grid-column: 1 / -1; }
}

.menubar { display: flex; align-items: center; gap: 6px; padding: 0 14px; background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--rule-2); font-size: 13.5px; }
.menubar .logo { display: flex; align-items: center; gap: 8px; margin-right: 10px; font-weight: 700; font-size: 15px;
  color: var(--forest); text-decoration: none; }
.menubar .logo img { width: 28px; height: 28px; border-radius: 8px; }
.menubar .right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.menubar .right a { color: var(--green-d); font-weight: 600; text-decoration: none; }
.menubar .right a:hover { text-decoration: underline; }
.menubar .right .ms { font-size: 16px; color: var(--green-d); vertical-align: -3px; }

.area { grid-row: 2; min-height: 0; min-width: 0; padding: 16px 22px 8px; }
.area > .win:only-child { height: 100%; }

/* The dock is the only site nav. It comes before .area in the markup (keyboard
   order), and the grid places it: bottom bar on phones, left panel on laptops. */
.dock { grid-row: 3; justify-self: center; display: flex; gap: 6px; margin-bottom: 8px; padding: 6px 10px; background: rgba(255,255,255,.96);
  border: 1px solid var(--rule-2); border-radius: 22px; box-shadow: 0 12px 30px -10px rgba(20,83,45,.25); }
.dock a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 86px; padding: 6px 4px 4px;
  border-radius: 14px; color: var(--text-3); text-decoration: none; font-size: 11px; font-weight: 600; transition: background-color .15s; }
.dock a .ms { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--rule);
  color: var(--forest); font-size: 22px; transition: transform .15s; }
.dock a:hover { background: var(--mint); color: var(--forest); }
.dock a:hover .ms { transform: translateY(-2px); }
.dock a[aria-current] { color: var(--forest); }
.dock a[aria-current] .ms { background: var(--forest); color: #fff; }
.dock a[aria-current]::after { content: ''; position: absolute; bottom: -4px; width: 5px; height: 5px; border-radius: 50%; background: var(--green-d); }
.dock .sep { width: 1px; margin: 6px 2px; background: var(--rule-2); }
/* App mode: the dock is a left panel, one row (icon + label) per page. */
@media (min-width: 1024px) and (min-height: 560px) {
  .area { grid-column: 2; padding: 16px 22px 16px 14px; }
  .dock { grid-column: 1; grid-row: 2; flex-direction: column; gap: 2px; width: 204px; margin: 0; padding: 14px 10px; overflow-y: auto;
    background: #fff; border: 0; border-right: 1px solid var(--rule-2); border-radius: 0; box-shadow: none; }
  .dock a { flex-direction: row; gap: 10px; width: auto; padding: 5px 8px; font-size: 13.5px; }
  .dock a .ms { width: 32px; height: 32px; border-radius: 10px; font-size: 20px; }
  .dock a[aria-current] { background: var(--rule); font-weight: 700; }
  .dock a[aria-current]::after { display: none; }
  .dock .sep { width: auto; height: 1px; margin: 6px 8px; }
}
/* With a mouse the panel tucks away off the left edge. What stays is a labelled
   "Menu" tab at the top left (::after) and an invisible 10px strip down the whole
   edge (::before); pointing at either, or tabbing into the links, slides the
   panel over the windows. It lingers 150ms after the pointer leaves, so a
   sloppy move doesn't snap it shut. Touch screens have no hover, so they keep
   the panel open. */
@media (min-width: 1024px) and (min-height: 560px) and (hover: hover) and (pointer: fine) {
  .desk-frame { grid-template-columns: minmax(0,1fr); }
  .area { grid-column: 1; padding-left: 42px; }
  .dock { position: fixed; z-index: 20; top: 44px; bottom: 0; left: 0; overflow: visible;
    transform: translateX(-100%); transition: transform .18s ease .15s; }
  .dock::before { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 10px; }
  .dock::after { content: 'Menu'; position: absolute; top: 14px; left: 100%; width: 30px; padding: 34px 0 12px;
    writing-mode: vertical-rl; line-height: 30px; font: 700 12px/30px var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
    border-radius: 0 10px 10px 0; box-shadow: 0 6px 16px -6px rgba(20,83,45,.45); transition: opacity .15s;
    background: linear-gradient(#fff,#fff) 50% 12px / 14px 2px no-repeat, linear-gradient(#fff,#fff) 50% 17px / 14px 2px no-repeat,
      linear-gradient(#fff,#fff) 50% 22px / 14px 2px no-repeat, var(--forest); }
  .dock:hover, .dock:focus-within { transform: none; transition-delay: 0s; box-shadow: var(--win-shadow); }
  .dock:hover::after, .dock:focus-within::after { opacity: 0; pointer-events: none; }
}

/* ------------------------------------------------------------- window -- */
.win { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: #fff;
  border: 1px solid var(--rule-2); border-radius: 14px; box-shadow: var(--win-shadow); }
.win-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px;
  background: linear-gradient(#fff, var(--mint)); border-bottom: 1px solid var(--rule); }
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--rule-2); }
.dots i:nth-child(2) { background: var(--glow); }
.dots i:nth-child(3) { background: var(--green); }
.win-title { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 12.5px; font-weight: 700; color: var(--forest); }
.win-title .ms { font-size: 17px; color: var(--green-d); }
.win-aside { margin-left: auto; font-size: 12px; color: var(--soft); white-space: nowrap; }
.win-aside a { font-weight: 600; }
.win-body { flex: 1; min-height: 0; min-width: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.win-tabs { flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 6px 10px 0; background: var(--mint); border-bottom: 1px solid var(--rule-2); }
.win-tabs a { display: flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 7px 14px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 10px 10px 0 0; color: var(--text-3); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.win-tabs a .ms { font-size: 16px; }
.win-tabs a:hover { background: rgba(255,255,255,.6); color: var(--forest); }
.win-tabs a[aria-current] { background: #fff; border-color: var(--rule-2); color: var(--forest); }
.win-status { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 6px 14px; border-top: 1px solid var(--rule);
  background: var(--mint); font-size: 12px; color: var(--text-3); }
.win-status .ms { font-size: 15px; vertical-align: -3px; color: var(--green-d); }
.win-status .amber { color: var(--amber-ink); }
.win-status .amber .ms { color: var(--amber-btn); }
.win-status a { color: inherit; font-weight: 600; }

/* ------------------------------------------------------------- pieces -- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; margin: 0;
  border: 2px solid transparent; border-radius: 999px; font: 700 14.5px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s; }
.btn .ms { font-size: 19px; }
.btn-primary { background: var(--green-d); color: #fff; box-shadow: 0 8px 20px rgba(22,163,74,.25); }
.btn-primary:hover { background: var(--forest); color: #fff; }
.btn-ghost { background: #fff; border-color: var(--rule-2); color: var(--green-d); }
.btn-ghost:hover { background: var(--mint); border-color: var(--green-d); color: var(--forest); }
.btn-amber, .notice .btn-amber { background: var(--amber-btn); color: #fff; }
.btn-amber:hover { background: var(--amber-ink); color: #fff; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--green-d); }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--rule); color: var(--forest);
  font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.tag-amber { background: #FEF3C7; color: var(--amber-btn); }
.tag-grey { background: #E5E7EB; color: var(--text-3); }
.notice { margin: 0; padding: 10px 14px; border: 1px solid var(--amber-line); border-radius: 12px; background: var(--amber-bg);
  color: var(--amber-ink); font-size: 13.5px; line-height: 1.55; }
.notice a { color: var(--amber-ink); font-weight: 700; }
.notice p { margin: 0; }
.notice p + p { margin-top: 8px; }
.notice-green { border-color: var(--rule-2); border-left: 3px solid var(--green); background: var(--mint); color: var(--text-2); }

/* Library layout: a source list on the left, the open item on the right. */
.lib { display: grid; grid-template-columns: 260px minmax(0,1fr); overflow: hidden; }
.shelf { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: auto; padding: 12px 10px;
  background: var(--mint); border-right: 1px solid var(--rule); }
.shelf h3 { margin: 10px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--soft); }
.shelf h3:first-child { margin-top: 4px; }
.shelf a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--text-2);
  font-size: 13.5px; line-height: 1.3; text-decoration: none; }
.shelf a .ms { font-size: 18px; color: var(--soft); }
.shelf a:hover { background: #fff; color: var(--forest); }
.shelf a[aria-current] { background: #fff; color: var(--forest); font-weight: 700; box-shadow: 0 1px 3px rgba(20,83,45,.08); }
.shelf a[aria-current] .ms { color: var(--green-d); }
.shelf .note { margin: auto 8px 4px; padding-top: 12px; font-size: 12px; line-height: 1.5; color: var(--soft); }

.reader { min-height: 0; overflow: auto; padding: clamp(22px,3vw,40px) clamp(24px,4vw,56px); scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.reader h1 { margin: 6px 0 8px; font: 700 clamp(26px,2.5vw,38px)/1.12 var(--serif); color: var(--forest); }
.reader > section > h2, .reader h2.sec { margin: 0 0 12px; font: 600 clamp(22px,2vw,28px)/1.2 var(--serif); color: var(--forest); }
.byline { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-3); }
.reader > .notice { margin-bottom: 18px; max-width: 72ch; }
.prose { max-width: 72ch; }
.prose::after { content: ''; display: block; clear: both; }
.prose p, .prose li { font-size: 16px; line-height: 1.75; color: var(--text-2); }
.prose p { margin: 0 0 14px; }
.prose h3 { margin: 22px 0 6px; font: 700 17px/1.3 var(--sans); color: var(--forest); }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose ul ul { margin: 6px 0 0; }
.prose strong { color: var(--forest); }
.prose .figure { float: right; width: min(38%, 280px); margin: 4px 0 16px 28px; }
.prose .figure img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--rule); }

/* ------------------------------------------------------------- home -- */
.home { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.95fr) minmax(0,1.1fr); grid-template-rows: minmax(0,1fr) auto; gap: 16px; }
.home .w-welcome { grid-row: 1 / 3; }
.home .w-mission { grid-column: 3; grid-row: 1 / 3; }
.w-welcome .win-body { display: flex; flex-direction: column; }
.welcome { display: grid; gap: 14px; padding: clamp(20px,2.4vw,36px); }
.welcome h1 { margin: 0; font: 700 clamp(30px,3vw,50px)/1.06 var(--serif); color: var(--forest); }
.welcome p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 54ch; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.quick a { padding: 4px 10px; border-radius: 999px; background: var(--rule); color: var(--forest); font-weight: 600; text-decoration: none; }
.quick a:hover { background: var(--rule-2); }
.strip { position: relative; flex: 1; min-height: 110px; margin: 0; border-top: 1px solid var(--rule); }
.strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.strip figcaption { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.94);
  font-size: 12px; font-weight: 700; color: var(--forest); }
.pad { padding: 14px 16px; }
.app-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--rule);
  border-radius: 14px; color: var(--text); text-decoration: none; transition: border-color .15s, background-color .15s; }
.app-row + .app-row { margin-top: 8px; }
.app-row:hover { border-color: var(--green-d); background: var(--mint); }
.app-row > .ms:first-child { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--forest); color: #fff; }
.app-row > .ms:last-child { color: var(--green-d); }
.app-row b { display: block; font-size: 14.5px; color: var(--forest); }
.app-row small { font-size: 12.5px; color: var(--text-3); }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.cats a { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 8px; border-radius: 10px; background: var(--mint);
  color: var(--text-2); font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.cats a .ms { font-size: 17px; color: var(--green-d); }
.cats a:hover { background: var(--rule); color: var(--forest); }
.two { display: grid; grid-template-columns: 1fr 1fr; }
.two > div { padding: 12px 14px; min-width: 0; }
.two > div + div { border-left: 1px solid var(--rule); }
.two h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--green-d); }
.two h3 .ms { font-size: 16px; }
.two a { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; text-decoration: none; }
.two a .ms { font-size: 17px; color: var(--soft); }
.two a:hover { background: var(--mint); color: var(--forest); }
.mission { padding: 16px 20px; display: grid; gap: 10px; align-content: start; }
.mission h2 { margin: 0; font: 600 22px/1.2 var(--serif); color: var(--forest); }
.mission h3 { margin: 6px 0 0; font: 600 17px/1.25 var(--serif); color: var(--forest); }
.mission p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.mission .fine { padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; font-style: italic; color: var(--soft); }

/* -------------------------------------------------------- other pages -- */
.launch { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.launch .app-tile { padding: 18px; gap: 8px; }
.launch .app-tile > .ms { width: 48px; height: 48px; border-radius: 14px; font-size: 26px; }
.launch .app-tile h2 { font-size: 18px; }
.launch .app-tile p { font-size: 13.5px; line-height: 1.55; }
.app-tile { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--rule-2); border-radius: 18px;
  background: #fff; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.app-tile:hover { border-color: var(--green-d); box-shadow: 0 12px 28px -12px rgba(20,83,45,.25); }
.app-tile > .ms { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--forest); color: #fff; font-size: 30px; }
.app-tile h2 { margin: 0; font: 600 20px/1.2 var(--serif); color: var(--forest); }
.app-tile p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.app-tile .open { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--green-d); display: flex; align-items: center; gap: 4px; }
.app-tile.planned { border-style: dashed; border-color: #D1D5DB; background: #F9FAFB; }
.app-tile.planned > .ms { background: #E5E7EB; color: var(--soft); }
.app-tile.planned h2, .app-tile.planned p { color: var(--soft); }
.tools-body { display: grid; gap: 16px; align-content: start; padding: 20px 22px; }
.tools-body .notice { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.tools-body .notice p { max-width: 90ch; }

.area.center { display: grid; place-items: center; }
.area.center > .win { width: min(640px, 100%); }
.empty { display: grid; justify-items: center; gap: 14px; padding: 36px 32px 32px; text-align: center; }
.empty > .ms { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--rule); color: var(--forest); font-size: 32px; }
.empty h1 { margin: 0; font: 600 26px/1.2 var(--serif); color: var(--forest); }
.empty p { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.empty .fine { font-size: 14px; color: var(--soft); }

.split { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); overflow: hidden; }
.split > * { min-height: 0; overflow: auto; }
.split > aside { background: var(--mint); border-left: 1px solid var(--rule); padding: 22px; display: grid; gap: 16px; align-content: start; }
.form-pane { padding: 22px 26px; }
.form-pane h1 { margin: 0 0 4px; font: 700 28px/1.15 var(--serif); color: var(--forest); }
.form-pane .lede2 { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.form { display: grid; gap: 12px; }
.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: grid; gap: 5px; }
.fld label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.fld input, .fld textarea { width: 100%; padding: 10px 12px; border: 1.5px solid #7C8794; border-radius: 10px; background: #fff;
  font: 15px/1.4 var(--sans); color: var(--text); }
.fld textarea { resize: vertical; min-height: 96px; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--green-d); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.hp { position: absolute; left: -9999px; }
.card-note { padding: 16px; border: 1px solid var(--rule-2); border-left: 3px solid var(--green); border-radius: 12px; background: #fff; }
.card-note h2 { margin: 0 0 8px; font: 600 17px/1.25 var(--serif); color: var(--forest); }
.card-note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.card-note p + p { margin-top: 10px; }
.links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.links a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 12px; background: #fff;
  color: var(--forest); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.links a:hover { border-color: var(--green-d); }
.links .ms { color: var(--green-d); }

.reader .panel { max-width: 76ch; }
.reader .panel p, .reader .panel li { font-size: 16px; line-height: 1.75; color: var(--text-2); }
.reader .panel p { margin: 0 0 14px; }
.reader .panel ul { margin: 0 0 14px; padding-left: 22px; }
.reader .panel li + li { margin-top: 8px; }
.reader .panel strong { color: var(--forest); }
.reader .panel .fine { padding-top: 10px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--soft); }
.reader .panel .fine strong { color: var(--text-3); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.intro { max-width: 900px; }
.intro p { margin: 0 0 10px; font-size: 16px; line-height: 1.7; color: var(--text-2); max-width: 70ch; }
.intro .fine { font-size: 14px; color: var(--soft); }
.folders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin-top: 18px; }
.app-tile .list { display: grid; margin-top: 2px; }
.app-tile .list a { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--rule);
  color: var(--forest); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.app-tile .list a:last-child { border-bottom: 0; }
.app-tile .list a .ms { margin-left: auto; font-size: 18px; color: var(--green-d); }
.app-tile .list a:hover { color: var(--green-d); }
.cats.wide { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 0; }
.folders .app-tile { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 4px 12px; padding: 16px 18px; }
.folders .app-tile > .ms { width: 44px; height: 44px; border-radius: 12px; font-size: 24px; }
.folders .app-tile > p, .folders .app-tile > .list { grid-column: 1 / -1; }
.folders .app-tile .list a { padding: 7px 4px; }
.empty h2 { margin: 0; font: 600 26px/1.2 var(--serif); color: var(--forest); }

/* ---------------------------------------------------------- tool pages -- */
/* The tool's own grid becomes the window body; its cards go flat. */
.tool-win .shell, .tool-win .app { flex: 1; min-height: 0; height: auto; max-width: none; margin: 0; padding: 0; gap: 0;
  grid-template-rows: minmax(0,1fr); overflow: hidden; }
.tool-win .side { border: 0; border-right: 1px solid var(--rule); border-radius: 0; background: var(--mint); }
.tool-win .workspace { padding: 16px 20px; }
.tool-win .shell.with-tape { grid-template-columns: 16.5rem minmax(0,1fr) 15.5rem; }
.tool-win .pane { border: 0; border-radius: 0; box-shadow: none; }
.tool-win .pane-in { border-right: 1px solid var(--rule); }
.tool-win .page { max-width: none; margin: 0; padding: 18px 22px; }

/* Workbench: tools read as software panels, not web pages. Page headings the
   window title and tabs already say are kept for screen readers only, and the
   links the tabs already offer are hidden, so nothing shows twice. */
.tool-win .focus > .ws-head, .tool-win .launcher .ws-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tool-win #catnav > .side-head, .tool-win #catnav > a, .tool-win .side-foot { display: none; }

/* Explorer columns, like Finder or Outlook: categories | the category's
   calculators | the open calculator. render.js builds #catlist and #catnav and
   marks the category on screen (.here on its group, aria-current on its link).
   The Dose Converter shares the first column; its two panes are columns 2 and 3. */
.tool-win .shell.cols { grid-template-columns: 15rem 21rem minmax(0,1fr); }
.tool-win .app { grid-template-columns: 15rem minmax(0,30rem) minmax(0,1fr); }
@media (max-width: 1440px) {
  .tool-win .shell.cols { grid-template-columns: 14rem 18rem minmax(0,1fr); }
  .tool-win .app { grid-template-columns: 14rem minmax(0,28rem) minmax(0,1fr); }
}
.tool-win .side { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 10px; }
.tool-win .side .search { background: #fff; }
.side-label { margin: 6px 8px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
#catlist { display: grid; gap: 1px; align-content: start; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
#catlist a { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px;
  color: var(--text-2); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color .15s, color .15s; }
#catlist a .material-symbols-outlined { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--rule);
  color: var(--forest); font-size: 18px; vertical-align: 0; }
#catlist a:hover { background: #fff; color: var(--forest); }
#catlist a[aria-current] { background: #fff; color: var(--forest); box-shadow: 0 1px 3px rgba(20,83,45,.1); }
#catlist a[aria-current] .material-symbols-outlined { background: var(--forest); color: #fff; }

/* Column 2: the category's calculators, each with its formula underneath. The
   group's summary is the column header. While searching, every matching group shows. */
.tool-win .cols #catnav { min-height: 0; overflow: auto; padding: 0 6px 8px; border-right: 1px solid var(--rule); font-size: 13.5px;
  scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.tool-win #catnav:not(.searching):has(> .here) > .side-cat:not(.here) { display: none; }
.tool-win .cols .side-cat > summary { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 44px;
  margin: 0 -6px 4px; padding: 8px 12px; border-radius: 0; background: #fff; border-bottom: 1px solid var(--rule);
  color: var(--forest); font-size: 13px; font-weight: 700; list-style: none; cursor: default; }
.tool-win .cols .side-cat > summary::-webkit-details-marker { display: none; }
.tool-win .cols .side-cat > summary:hover { background: #fff; }
.tool-win .cols .side-cat > summary .material-symbols-outlined { font-size: 18px; color: var(--green-d); vertical-align: 0; }
.tool-win .side-count { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--rule); font-size: 11.5px; }
.tool-win .cols #catnav .side-cat > a { display: grid; gap: 2px; margin: 0 0 2px; padding: 7px 10px !important; border: 1px solid transparent; border-radius: 10px;
  color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.tool-win .cols #catnav .side-cat > a:hover { background: var(--mint); color: var(--forest); }
.side-formula { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px var(--mono); color: var(--text-3); }
.tool-win .cols #catnav a[aria-current="page"] { background: var(--rule); border-color: var(--rule-2); color: var(--forest); font-weight: 700; box-shadow: none; }
.tool-win .cols #catnav.searching:not(:has(> .side-cat:not([hidden])))::before { content: 'No calculator matches that search.';
  display: block; padding: 14px 8px; font-size: 13.5px; color: var(--text-3); }

/* Column 3 on the launcher: what the chosen category covers. */
.tool-win .launcher .workspace { padding: 20px 26px; }
.overview { display: grid; gap: 14px; max-width: 46rem; }
.ov-head { display: flex; align-items: center; gap: 14px; }
.ov-icon.material-symbols-outlined { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--forest);
  color: #fff; font-size: 30px; vertical-align: 0; }
.ov-count { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-d); }
.overview h2 { margin: 0; font-size: 22px; line-height: 1.2; color: var(--forest); }
.ov-blurb { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ov-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.ov-facts div { padding: 12px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--mint); }
.ov-facts b { display: block; margin-bottom: 2px; font-size: 13px; color: var(--forest); }
.ov-facts span { font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.ov-tip { margin: 0; padding: 10px 12px; border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; background: var(--mint); font-size: 13px; color: var(--text-2); }
.tool-win .launcher .trust-line { max-width: 46rem; }

/* Dose converter: each pane opens with a header strip, like a panel in a desktop app. */
.tool-win .pane { padding: 0 16px 16px; }
.tool-win .app-head { min-height: 44px; margin: 0 -16px 12px; padding: 6px 16px; background: #fff; border-bottom: 1px solid var(--rule); }
.tool-win .app-head .app-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--forest); color: #fff; font-size: 18px; }
.tool-win .app-head h1 { font-size: 15px; }
.tool-win .app-head .tagline { font-size: 12px; }
.tool-win .pane-title { display: flex; align-items: center; min-height: 44px; margin: 0 -16px; padding: 0 16px; background: #fff;
  border-bottom: 1px solid var(--rule); font-size: 11.5px; font-weight: 700; color: var(--text-3); }

/* ------------------------------------------------------ small screens -- */
/* Phones, tablets and short windows: normal page scroll, dock pinned to the bottom. */
@media (max-width: 1023px), (max-height: 559px) {
  .desk-frame { grid-template-rows: auto 1fr auto; }
  .menubar { flex-wrap: wrap; row-gap: 4px; padding: 8px 12px; }
  .menubar .right { display: none; }
  .area { padding: 12px; }
  .home, .lib, .split, .launch, .two, .folders, .form .pair, .tool-win .shell.cols, .tool-win .app { grid-template-columns: minmax(0,1fr); grid-template-rows: none; }
  .home > .win { grid-row: auto; grid-column: auto; }
  .win-body, .reader, .shelf, .split > * { overflow: visible; }
  .shelf { border-right: 0; border-bottom: 1px solid var(--rule); }
  .shelf .note { margin-top: 8px; }
  .split > aside { border-left: 0; border-top: 1px solid var(--rule); }
  .two > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .prose .figure { float: none; width: 100%; margin: 0 0 16px; }
  .strip { min-height: 180px; }
  .tool-win .side { border-right: 0; }
  .tool-win .workspace, .tool-win .pane-in { order: 1; } .tool-win .pane-out { order: 2; }
  .tool-win .cols #catnav { order: 2; overflow: visible; border-right: 0; border-top: 1px solid var(--rule); }
  .tool-win .side { order: 3; border-top: 1px solid var(--rule); } #catlist { grid-template-columns: 1fr 1fr; overflow: visible; }
  .ov-facts { grid-template-columns: minmax(0,1fr); }
  .tool-win .launcher .side { order: 0; border-top: 0; } .tool-win .launcher .workspace { order: 3; }
  .dock { position: sticky; bottom: 8px; z-index: 5; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
  .dock a { flex: none; width: auto; min-width: 62px; white-space: nowrap; }
  .win-tabs { overflow-x: auto; scrollbar-width: none; }
  .win-tabs a { flex: none; white-space: nowrap; }
}
@media (max-width: 420px) { .cats { grid-template-columns: 1fr 1fr; } .win-tabs a { padding: 7px 8px; } }

/* Short laptops (1280×600 visible): one density step down so windows still fit. */
@media (min-width: 1024px) and (max-height: 680px) {
  .area { padding-top: 12px; }
  /* 12 Menu rows have to fit under the menubar at 1280x600 */
  .dock a { padding-block: 3px; }
  .dock a .ms { width: 28px; height: 28px; font-size: 18px; }
  .welcome { gap: 10px; padding: 18px 24px; }
  .welcome h1 { font-size: 34px; }
  .tool-win .pane { padding-bottom: 12px; }
  .tool-win .focus.workspace { padding: 10px 14px; }
  #catlist a { grid-template-columns: 26px minmax(0,1fr); padding-block: 4px; }
  #catlist a .material-symbols-outlined { width: 26px; height: 26px; font-size: 16px; }
  .ov-facts div { padding: 10px; }
  .tool-win .app-head, .tool-win .pane-title { min-height: 40px; }
  .tool-win .app-head { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}