* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The `hidden` attribute is only `display: none` in the UA stylesheet, so ANY
   author display rule (.findpanel is display:flex, dialog label.row too) beats
   it and the element stays on screen. This keeps hidden meaning hidden. */
[hidden] { display: none !important; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: #1c2430;
  background: #f4f6f8;
}

/* ---------- footer ---------- */
.sitefoot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 5px 14px; font-size: 11.5px; color: #8a93a0;
}
/* a white strip only where it closes off the plan; on a short page (sign-in)
   a strip floated halfway down the screen (v2.1.02) */
body.planpage > .sitefoot { background: #fff; border-top: 1px solid #e2e7ed; }
.sitefoot a { color: #5a6672; }
.sitefoot .dot { opacity: .5; }
body.planpage > .sitefoot { flex: 0 0 auto; }

/* ---------- installed-app bars ----------
   Both sit above everything and are plain flex rows of the planpage column,
   so they push the grid down rather than covering it. */
.appbar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 7px 14px; font-size: 13.5px; text-align: center;
}
/* The update strip takes its green and button from the shared block
   (.netbar-new / .netbar-reload); the ids stay this app's own. Offline is the
   same strip in amber. Both 38px, above the bar. */
.updatebar, .offlinebar { min-height: 38px; font-weight: 600; padding: 4px 14px; }
.updatebar button:disabled { opacity: .6; cursor: default; }
.offlinebar { background: #F2C14E; color: #3F3110; }
.pintip { background: #eaf5ea; color: #1c2430; border-bottom: 1px solid #c6e0c6; }
.pintip button {
  font: inherit; font-size: 13px; padding: 3px 12px; border-radius: 6px;
  border: 1px solid #9cc79c; background: #fff; cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Install as an app - the BANNER (v4.102.0). Paul, 2026-10-01: "a lot more
   visible, so it's clear what we're asking them to do and not part of the
   tables and badges". Full width above the page title, the strong Clarity
   green, white text, one big white button. Nothing else in the app looks like
   this, which is the point.
   --------------------------------------------------------------------------- */
.install-banner {
  position: relative;
  margin: 0 0 22px;
  padding: 20px 24px;
  border-radius: 14px;
  color: #fff;
  background: #1E8C2E;
  background: linear-gradient(100deg, #096126 0%, #1E8C2E 55%, #49A91D 100%);
  box-shadow: 0 6px 18px rgba(9, 97, 38, 0.28);
}
.install-banner-row {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-right: 26px;
}
.install-banner-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  padding: 5px;
  border-radius: 19px;
  background: #fff;
  color: #096126;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.install-banner-icon img { display: block; width: 74px; height: 74px; }
.install-banner-icon .ui-icon { width: 40px; height: 40px; margin: 0; }
.install-banner-icon-done { border-radius: 50%; }
.install-banner-body { flex: 1; min-width: 0; }
.install-banner .install-banner-kicker {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.install-banner .install-banner-title {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.install-banner .install-banner-why { margin: 0; font-size: 1rem; opacity: 0.95; }
.install-banner a { color: #fff; }
.install-banner-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.install-banner .install-banner-cta {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #096126;
  font-size: 1.12rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.install-banner .install-banner-cta:hover { background: #F0F8F2; }
.install-banner .install-banner-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.install-banner-cta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.install-banner-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 0.92rem;
}
.install-banner .install-banner-links a,
.install-banner .install-banner-links .link-button {
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: underline;
}
.install-banner-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  list-style: none;
  font-size: 0.95rem;
}
.install-banner-steps li { display: flex; gap: 9px; align-items: center; }
.install-banner-steps b {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #096126;
  font-size: 0.85rem;
}
.install-banner .install-banner-close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 8px;
  border: none;
  background: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.85;
}
.install-banner .install-banner-close:hover { opacity: 1; background: none; }
@media (max-width: 860px) {
  .install-banner-row { flex-wrap: wrap; padding-right: 0; }
  .install-banner-actions { width: 100%; }
}

/* Clarity Resource's glue for the banner above (copied from Clarity PC - edit
   it there and re-copy, never here). Resource's personal links are opened on
   phones, so the banner's wording switches: install-app.js sets html.app-desk
   on a PC and html.app-edge in Edge. Each element keeps its own display; the
   one that does not apply is simply hidden. */
.app-desk .pin-phone { display: none !important; }
html:not(.app-desk) .pin-desk { display: none !important; }
.app-desk:not(.app-edge) .pin-edge { display: none !important; }
.app-desk.app-edge .pin-chrome { display: none !important; }
/* Above the page title, full width: on the plan it is a row of the page's
   column, under the bar; in the install help it opens the steps. */
body.planpage > .install-banner { flex: 0 0 auto; margin: 12px 18px 10px; }
/* On a phone it would fill the screen above the plan: the big icon goes, and
   the one-tap install drops its two obvious steps (the iPhone's stay - they
   ARE the instructions there). */
@media (max-width: 519px) {
  .install-banner { padding: 16px 18px; }
  .install-banner-icon { display: none; }
  .install-banner .install-banner-title { font-size: 1.3rem; }
  html:not(.app-desk) [data-install-variant="ready"] .install-banner-steps { display: none; }
}
.installhelp .install-banner { margin: 6px 0 16px; }

.install-which ul { margin: 6px 0; padding-left: 20px; max-width: 68ch; }
.install-which li { margin: 4px 0; font-size: 14px; }
.install-steps {
  border: 1px solid #d8dee6; border-radius: 8px; padding: 8px 14px; margin: 8px 0; background: #fff;
}
.install-steps > summary { cursor: pointer; font-weight: 600; }
.install-step-list { display: flex; flex-direction: column; gap: 14px; padding-left: 22px; }
.install-step-list li p { margin: 4px 0 8px; }
.install-pin {
  border: 1px solid #d8dee6; border-left: 4px solid #2e7d32; border-radius: 8px;
  padding: 8px 14px; margin: 14px 0; background: #fff;
}
.ill { display: block; width: 100%; max-width: 420px; height: auto; margin: 6px 0 4px; }
.ill-frame { fill: #e9edf1; stroke: #c5cdd5; }
.ill-field { fill: #fff; stroke: #c5cdd5; }
.ill-dialog { fill: #fff; stroke: #c5cdd5; }
.ill-taskbar { fill: #dce3ea; }
.ill-icon { fill: #b7c2cc; }
.ill-app-icon { fill: #1f3a5f; }
.ill-glyph { fill: none; stroke: #33404a; stroke-width: 1.6; }
.ill-glyph-line { fill: none; stroke: #33404a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ill-text { fill: #1a1a1a; font-size: 13px; font-family: inherit; }
.ill-text-muted { fill: #5b6770; font-size: 12px; font-family: inherit; }
.ill-title { fill: #1a1a1a; font-size: 15px; font-weight: 700; font-family: inherit; }
.ill-button { fill: #fff; stroke: #c5cdd5; }
.ill-button-primary { fill: #1f3a5f; }
.ill-button-text { fill: #fff; font-size: 13px; font-weight: 600; font-family: inherit; }
.ill-check { fill: #fff; stroke: #8a9199; }
.ill-check-on { fill: #1f3a5f; }
.ill-tick { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill-hl { fill: none; stroke: #e8590c; stroke-width: 3; }
.ill-hl-fill { fill: #fff1e6; stroke: #e8590c; stroke-width: 2; }
.ill-arrow { stroke: #e8590c; stroke-width: 3; stroke-linecap: round; }

/* Glue for the shared block below: the two variables the Planner defines
   for itself, and the white of the tools row. */
:root { --sans: "Segoe UI", Arial, sans-serif; --ink: #1c2430; --crow-bg: #FFFFFF; }
.cbar-signout { margin: 0; display: flex; }   /* the Sign out form, as the Planner's .inline-form */

/* ==== THE CLARITY BAR (v0.96.0) ==========================================
   Shared by Clarity Planner, Clarity Resource and Clarity PC Site Manager -
   copy this block, do not redraw it (0000-Software/CLARITY BANNER AND HELP.md).
   One dark for every product and every customer; Green 2 marks where you are
   and that a new version is ready. */
:root {
  --cbar-bg: #17231C; --cbar-ink: #FFFFFF; --cbar-ink-soft: rgba(255, 255, 255, 0.74);
  --cbar-accent: #49A91D; --cbar-deep: #096126; --crow-rule: #D7DED9;
}
.cbar { display: flex; align-items: center; gap: 1.4rem; height: 56px; padding: 0 1.1rem; background: var(--cbar-bg); color: var(--cbar-ink);
  font-family: var(--sans); position: relative; z-index: 20; }
.cbar-prod { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; color: var(--cbar-ink); text-decoration: none; }
.cbar-prod img { width: 30px; height: 30px; display: block; }
.cbar-prod span { font-size: 17px; font-weight: 400; letter-spacing: 0.01em; white-space: nowrap; }
.cbar-prod b { font-weight: 700; }
.cbar-tabs { display: flex; gap: 0.15rem; align-self: stretch; }
.cbar-tabs a, .cbar-menu nav a { display: inline-flex; align-items: center; padding: 0 0.75rem; color: var(--cbar-ink-soft); font-size: 14.5px; font-weight: 600;
  text-decoration: none; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.cbar-tabs a:hover, .cbar-tabs a:focus-visible { color: var(--cbar-ink); }
.cbar-tabs a[aria-current="page"] { color: var(--cbar-ink); border-bottom-color: var(--cbar-accent); }
.cbar-menu { display: none; position: relative; }
.cbar-menu > summary { list-style: none; cursor: pointer; color: var(--cbar-ink); font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; padding: 0.3rem 0.7rem; }
.cbar-menu > summary::-webkit-details-marker { display: none; }
.cbar-menu nav { position: absolute; left: 0; top: calc(100% + 0.5rem); min-width: 12rem; background: #fff; border: 1px solid var(--crow-rule); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(22, 32, 43, 0.16); display: flex; flex-direction: column; padding: 0.3rem 0; }
.cbar-menu nav a { color: var(--ink); padding: 0.5rem 0.9rem; border: 0; border-left: 3px solid transparent; }
.cbar-menu nav a[aria-current="page"] { border-left-color: var(--cbar-accent); color: var(--cbar-deep); }
.cbar-side { margin-left: auto; display: flex; align-items: center; gap: 1rem; white-space: nowrap; min-width: 0; }
.cbar-chip { background: #fff; border-radius: 6px; padding: 4px 9px; display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; flex: none; }
.cbar-chip img { max-height: 24px; max-width: 140px; display: block; }
.cbar-chip-name { color: var(--cbar-bg); font-size: 13px; font-weight: 700; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 24px; }
.cbar-help { color: var(--cbar-ink); font-weight: 600; text-decoration: none; }
.cbar-help:hover, .cbar-help:focus-visible { text-decoration: underline; }
.cbar-who { color: var(--cbar-ink-soft); font-size: 14px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cbar-out { font: inherit; font-weight: 600; font-size: 14px; color: var(--cbar-ink); background: transparent; border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; }
.cbar-out:hover, .cbar-out:focus-visible { background: rgba(255, 255, 255, 0.12); }
.cbar a:focus-visible, .cbar button:focus-visible, .cbar summary:focus-visible { outline: 2px solid var(--cbar-accent); outline-offset: 2px; }
/* WHERE IT FOLDS - measured, and the same on every Clarity product
   (v0.96.01). The bar wants ~900px with four tabs, the chip, Help, the name
   and Sign out; at 700-780 it ran off the edge. So the name goes under
   1000px, the tabs fold into Menu under 820px, the chip and the product's
   name under 520px - the numbers Clarity Resource measured too. */
@media (max-width: 999px) { .cbar-who { display: none; } }
@media (max-width: 819px) {
  .cbar { height: 52px; gap: 0.8rem; padding: 0 0.75rem; }
  .cbar-tabs { display: none; }
  .cbar-menu { display: block; }
  .cbar-prod span { font-size: 15px; }
  .cbar-side { gap: 0.7rem; }
}
@media (max-width: 519px) { .cbar-chip, .cbar-prod span { display: none; } }
/* The row under the bar: Back first, in the shared button shape. */
.crow { min-height: 48px; box-sizing: border-box; }
.crow-back { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--crow-rule);
  border-radius: 6px; padding: 0.3rem 0.75rem; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.crow-back:hover, .crow-back:focus-visible { border-color: var(--cbar-deep); color: var(--cbar-deep); }
/* The update strip: the same green and words on every product. */
.netbar-new { background: var(--cbar-accent); color: #fff; font-weight: 600; justify-content: center; border-bottom-color: var(--cbar-accent); }
.netbar-reload { font: inherit; font-weight: 600; background: #fff; color: var(--cbar-deep); border: 0; border-radius: 6px; padding: 0.2rem 0.8rem; cursor: pointer; }
/* ==== end of the Clarity bar ============================================= */

/* ---------- the tools row (48px, white): each page's own controls ---------- */
.crow {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 7px 18px; white-space: nowrap;
  background: var(--crow-bg); border-bottom: 1px solid var(--crow-rule);
  overflow-x: auto;            /* a narrow screen scrolls the ROW, never the page */
}
.crow-title {
  margin: 0; font-size: 17px; font-weight: 700;
  color: var(--brand-ink, #1c2430);   /* the customer's colour, when it reads on white */
}
.crow-spacer { flex: 1; }
.crow-group { display: flex; align-items: center; gap: 5px; }
.crow-group + .crow-group { border-left: 1px solid var(--crow-rule); padding-left: 9px; }
/* A long row WRAPS to a second line on a laptop rather than hide its last
   buttons off the edge; sideways scrolling is kept for phones, as the shared
   spec says. (The plan page's row was the long one until v2.1.0; it is the
   ribbon now, below, and these rules do not reach it.) */
@media (min-width: 700px) {
  /* every wrapped line lines up on the right, as one line does; the title
     keeps the left. (Not under 700px: right-aligning a row that scrolls
     would push its start out of reach.) */
  .crow { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; justify-content: flex-end; }
  .crow-title { margin-right: auto; }
}
.cbtn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 10px;
  border: 1px solid var(--crow-rule); border-radius: 6px; background: #fff;
  color: #1c2430 !important; font: inherit; font-weight: 600;
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
}
.cbtn:hover { background: #F2F5F3; }
.cbtn.on { background: var(--cbar-deep); border-color: var(--cbar-deep); color: #fff !important; }
.filtersel {
  font: inherit; font-weight: 600; height: 32px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--crow-rule); background: #fff; color: #1c2430; max-width: 150px;
}
.filtersel option { color: #1c2430; background: #fff; }

/* ==== THE RIBBON (v1.0.0) ================================================
   Clarity Planner's block, word for word except its scope: the Planner's
   ".programme-page .grid-toolbar.rb" is Resource's ".crow.rb", and the rules
   for the Planner's own drop-downs (Columns, Print, Issue, the Key) and
   full-screen chart are left out, as Resource has none of them.
   Paul, 2026-10-03: MS Project / Asta Easy Plan's way of setting out the
   buttons - "lets go folded, i like that option, but an option to pin open".
   Folded: the tab row only; a tab drops its buttons OVER the chart. Pinned
   (html.rb-pinned): the buttons sit under the tabs, in the page. */
.crow.rb { display: block; position: relative; z-index: 25; margin: 0 0 0.45rem; gap: 0; flex-wrap: nowrap;
  background: #fff; border: 1px solid #D5DCD8; border-radius: 6px; }
.rb-tabs { display: flex; align-items: stretch; height: 34px; padding-left: 0; border-bottom: 1px solid transparent; }
.rb.rb-open .rb-tabs { border-bottom-color: #D5DCD8; }
.rb-file, .rb-tab { font: inherit; font-size: 0.9rem; border: 0; background: none; cursor: pointer; padding: 0 0.95rem; color: #2B3440; }
.rb-file { background: var(--cbar-deep); color: #fff; font-weight: 600; border-radius: 5px 0 0 0; margin-right: 0.3rem; }
.rb-file:hover, .rb-file.on { background: #0B7A30; }
.rb-tab { border-bottom: 3px solid transparent; margin-bottom: -1px; }
.rb-tab:hover { background: #F2F5F3; }
.rb-tab.on { color: var(--cbar-deep); font-weight: 700; border-bottom-color: var(--cbar-accent); background: #F7F9F8; }
.rb-file:focus-visible, .rb-tab:focus-visible, .rb-qat-btn:focus-visible, .rb-pin:focus-visible, .rb-big:focus-visible, .rb-small:focus-visible { outline: 2px solid var(--cbar-accent); outline-offset: -2px; }
.rb-spacer { flex: 1; }
.rb-qat { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.4rem 0 0.6rem; border-left: 1px solid #E1E6E3; }
.rb-qat-btn, .rb-pin { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; color: var(--ink); }
.rb-qat-btn:hover:not(:disabled), .rb-pin:hover { background: #F2F5F3; border-color: #D5DCD8; }
.rb-qat-btn:disabled { opacity: 0.4; cursor: default; }
.rb-qat-btn .ricon { width: 18px; height: 18px; }
.rb-qat-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.rb-pin svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.rb-pin[aria-pressed="true"] { background: #DCEBDF; border-color: #9CC8A8; color: var(--cbar-deep); }
.rb-pin[aria-pressed="true"] svg { fill: currentColor; }
/* the buttons */
.rb-body { position: absolute; left: -1px; right: -1px; top: 100%; background: #F7F9F8; border: 1px solid #D5DCD8; border-top: 0; border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 26px rgba(22, 32, 43, 0.18); display: none; }
.rb.rb-open .rb-body { display: block; }
html.rb-pinned .rb-body { position: static; box-shadow: none; border: 0; border-radius: 0 0 6px 6px; }
.rb-panel { display: flex; align-items: stretch; min-height: 92px; padding: 4px 4px 0; overflow-x: auto; }
.rb-panel[hidden] { display: none; }
.rb-group { display: flex; flex-direction: column; padding: 0 0.4rem; border-right: 1px solid #DCE2DE; flex: none; }
.rb-items { flex: 1; display: flex; align-items: flex-start; gap: 2px; }
.rb-label { text-align: center; font-size: 0.72rem; color: #5E6A64; padding: 3px 0 4px; white-space: nowrap; }
.ricon { display: block; flex: none; }
.rb-big { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 54px; padding: 4px 6px 3px; border: 1px solid transparent; border-radius: 4px;
  background: none; font: inherit; font-size: 0.78rem; color: #2B3440; line-height: 1.15; text-align: center; cursor: pointer; text-decoration: none; list-style: none; }
.rb-big > span { white-space: nowrap; }
.rb-big .ricon { width: 32px; height: 32px; }
.rb-small { display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 1px 7px; border: 1px solid transparent; border-radius: 3px; background: none;
  font: inherit; font-size: 0.8rem; color: #2B3440; white-space: nowrap; cursor: pointer; text-decoration: none; list-style: none; }
.rb-small .ricon { width: 16px; height: 16px; }
.rb-big:hover, .rb-small:hover, details[open] > .rb-big, details[open] > .rb-small { background: #E8F1EA; border-color: #B7D6BF; }
.rb-big[aria-pressed="true"], .rb-small[aria-pressed="true"] { background: #DCEBDF; border-color: #9CC8A8; }
.rb-big.is-off, .rb-small.is-off { color: var(--ink-faint); cursor: not-allowed; opacity: 0.55; }
.rb-big:disabled, .rb-small:disabled { opacity: 0.45; cursor: default; }
.rb-stack { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
.rb-note { max-width: 22rem; font-size: 0.8rem; color: var(--ink-soft); padding: 0.6rem 0.4rem; white-space: normal; }
@media print { .crow.rb { display: none !important; } }
/* the editing groups travel together: hidden for a viewer, as #step-tasks always was */
.rb-edit { display: contents; }
/* ==== end of the ribbon ================================================== */

/* ---- the ribbon in Resource: glue, not the Planner's block ---- */
:root { --accent: var(--cbar-deep); --ink-soft: #4a5563; --ink-faint: #8a94a0; }
/* Resource's ribbon IS the tools row, so it runs edge to edge under the bar
   like every other product's row, title first, rather than a box in a page */
.crow.rb { padding: 0; margin: 0; min-height: 0; overflow: visible; white-space: normal;
  border: 0; border-bottom: 1px solid var(--crow-rule); border-radius: 0; }
/* the dropped-down buttons go over the plan's sticky headings (z 35-38), and
   the bar's own Menu (on a narrow screen) still goes over the ribbon */
body.planpage > .crow.rb { z-index: 45; }
body.planpage > .cbar { z-index: 50; }
.crow.rb .rb-tabs { height: 44px; padding-left: 18px; }
.crow.rb .crow-title { display: flex; align-items: center; margin-right: 1.2rem; white-space: nowrap; }
.crow.rb .rb-file { border-radius: 5px 5px 0 0; margin-top: 8px; }
.crow.rb .rb-tab { margin-top: 8px; }
.rb.rb-open .rb-body { border-top: 1px solid #D5DCD8; }
html.rb-pinned .crow.rb .rb-body { border-top: 1px solid #D5DCD8; }
/* Resource's toggles are links, so "on" is a class (and aria-current), drawn
   as the Planner draws a pressed button */
.rb-big.on, .rb-small.on { background: #DCEBDF; border-color: #9CC8A8; color: var(--cbar-deep); font-weight: 600; }
.rb-len { justify-content: center; min-width: 5.2rem; }
.rb-dot { color: var(--cbar-accent); font-weight: 900; }
.rb-range { display: flex; align-items: center; padding: 0 0.8rem; font-size: 0.85rem; color: #5E6A64; white-space: nowrap; }
/* the Person and Site drop-downs, as two small rows */
.rb-pick .rb-small { cursor: default; height: 30px; }
.rb-pick .rb-small:hover { background: none; border-color: transparent; }
.rb-pick .rb-small > span { min-width: 3rem; }
.rb-pick .filtersel { height: 26px; max-width: 13rem; font-weight: 400; }
/* narrower screens: the dates go first, then the title; the tab row scrolls
   rather than push the pin off the edge, and the buttons wrap */
@media (max-width: 999px) { .rb-range { display: none; } }
@media (max-width: 699px) {
  .crow.rb .rb-tabs { padding-left: 10px; overflow-x: auto; overflow-y: hidden; }
  .crow.rb .crow-title { font-size: 15px; margin-right: 0.6rem; }
  .rb-panel { flex-wrap: wrap; row-gap: 4px; }
  .rb-group { border-right: 0; }
}
@media (max-width: 419px) { .crow.rb .crow-title { display: none; } }
.authlogo { max-height: 56px; max-width: 100%; margin-bottom: 10px; }
.authsub { margin-top: -6px; font-size: 13px; }

/* ---------- legend / brush toolbar ---------- */
.toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; background: #fff; border-bottom: 1px solid #d8dee6;
}
.toolbar .hint { color: #66707d; margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 2px solid transparent; border-radius: 6px;
  padding: 2px 8px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.chip span { font-size: 12px; }
.chip.armed { border-color: #1c2430; box-shadow: 0 0 0 2px #e8b931; }
.chip:disabled { cursor: default; }
.chip.eraser { background: #fff; border: 2px dashed #b8c0ca; }

/* ---------- the grid ---------- */
/* The plan page is a fixed-height column: the bars take what they need and the
   grid gets exactly the rest, so its horizontal scrollbar always sits on screen.
   A hardcoded max-height was wrong the moment the toolbar wrapped to two lines
   or the Who's-free panel opened - the scrollbar ended up below the fold. */
body.planpage { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.planpage > .cbar,
body.planpage > .crow,
body.planpage > .toolbar,
body.planpage > .bookednote,
body.planpage > .filternote,
body.planpage > .findpanel,
body.planpage > .appbar { flex: 0 0 auto; }
body.planpage > .gridwrap { flex: 1 1 auto; min-height: 0; max-height: none; }

.gridwrap { overflow: auto; max-height: calc(100vh - 96px); scrollbar-gutter: stable; }
/* classic (always drawn) scrollbars rather than thin overlay ones that fade */
.gridwrap::-webkit-scrollbar { height: 15px; width: 15px; }
.gridwrap::-webkit-scrollbar-track { background: #e7ebf0; }
.gridwrap::-webkit-scrollbar-thumb {
  background: #8d9aab; border-radius: 8px;
  border: 3px solid #e7ebf0; background-clip: padding-box;
}
.gridwrap::-webkit-scrollbar-thumb:hover { background: #6f7f93; background-clip: padding-box; border: 3px solid #e7ebf0; }
.gridwrap::-webkit-scrollbar-corner { background: #e7ebf0; }
table.plan { border-collapse: separate; border-spacing: 0; }
table.plan th, table.plan td { border-right: 1px solid #e2e7ed; border-bottom: 1px solid #e2e7ed; }

table.plan thead th {
  position: sticky; background: #fff; z-index: 30;
  font-weight: 600; color: #3d4653;
}
table.plan thead tr.months th { top: 0; text-align: left; padding: 4px 8px; font-size: 13px; }
table.plan thead tr.daysrow th { top: 27px; width: 26px; min-width: 26px; padding: 2px 0; font-weight: 400; }
table.plan thead th.corner { left: 0; z-index: 35; background: #fff; }
.daysrow .dow { display: block; font-size: 9px; color: #8a93a0; text-transform: uppercase; }
.daysrow .dom { display: block; font-size: 12px; }
.daysrow th.we { background: #eef1f5; }
.daysrow th.today .dom { background: #1f3a5f; color: #fff; border-radius: 8px; }

tr.projhead td {
  background: #dfe7f0; padding: 6px 10px; border-top: 2px solid #b9c6d6;
}
/* The heading cell spans every day, so it is far wider than the window and
   making IT sticky does nothing: the plan opens scrolled to today and the
   name came out as "ngate Bakery". The words inside stick instead (v2.1.02).
   Same for the month's name over its days. */
.projline, .projmeta { position: sticky; left: 10px; width: max-content; max-width: min(calc(100vw - 40px), 1100px); }
.projline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.projline strong { font-size: 14.5px; }
.projmeta { font-size: 12px; margin-top: 1px; }
.mlabel { position: sticky; left: 198px; }
.muted { color: #66707d; }

th.person {
  position: sticky; left: 0; z-index: 25;
  background: #fff; text-align: left; padding: 0;
  min-width: 190px; max-width: 190px;
}
.personbtn {
  display: block; width: 100%; border: none; background: none; font: inherit;
  text-align: left; padding: 3px 8px; cursor: pointer;
}
.personbtn:disabled { cursor: default; color: inherit; }
.personbtn .pname { display: block; font-weight: 600; font-size: 13px; }
.personbtn .prole { display: block; font-size: 11px; color: #8a93a0; }

td.cell {
  width: 26px; min-width: 26px; height: 30px;
  text-align: center; font-size: 11.5px; font-weight: 600;
  background: #fff; cursor: default; user-select: none;
  position: relative;
}
table.plan[data-editable] td.cell { cursor: pointer; }
td.cell.we { background: #eef1f5; }
td.cell.today { box-shadow: inset 2px 0 0 #1f3a5f, inset -2px 0 0 #1f3a5f; }
/* Bank holidays: non-working by default, shown as a red hatch. A status painted
   on top wins — /statuses.css is linked after this file, so its equally
   specific td.cell.st-* rule replaces the hatch when someone does work it. */
.hatch, td.cell.bh, td.findcell.bh {
  background-color: #fff5f5;
  background-image: repeating-linear-gradient(45deg,
    rgba(200, 0, 0, .28) 0, rgba(200, 0, 0, .28) 3px,
    transparent 3px, transparent 7px);
}
.daysrow th.bh { background-color: #fdeaea; }
.daysrow th.bh .dow, .daysrow th.bh .dom { color: #a81010; font-weight: 600; }

/* A status painted on a bank holiday replaces the hatch, so keep a red bar
   underneath it — otherwise a day worked (or marked Off Shift) stops looking
   like a bank holiday at all. */
td.cell.bh::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #c80000;
}

td.cell.clash::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #d40000; border: 1px solid #fff;
}

/* Status colours are generated from the database and served as /statuses.css,
   linked AFTER this file so its `td.cell.st-*` rules win over `td.cell`'s
   white background. Edit them on the Key page, never here. */

/* ---------- who's free? ---------- */
tr.findrow th.findhead {
  color: #8a93a0; font-weight: 500; font-size: 12px; font-style: italic;
  padding: 2px 8px; background: #fafbfc;
}
td.findcell {
  width: 26px; min-width: 26px; height: 18px;
  background: #fafbfc; cursor: pointer; user-select: none; position: relative;
}
td.findcell.we { background: #eef1f5; }
td.findcell.today { box-shadow: inset 2px 0 0 #1f3a5f, inset -2px 0 0 #1f3a5f; }
/* A weekday up to the project's end date with nobody on a covering shift.
   Deliberately finer and quieter than the bank-holiday hatch - it is a prompt,
   not a warning. Selecting for Who's-free still wins the background. */
td.findcell.gap {
  background-color: #fff9ef;
  background-image: repeating-linear-gradient(45deg,
    rgba(200, 122, 0, .34) 0, rgba(200, 122, 0, .34) 1px,
    transparent 1px, transparent 6px);
}
td.findcell.bh.gap { background-color: #fff5f5; }
td.findcell.sel { background: #e8b931; background-image: none;
  box-shadow: inset 0 0 0 1px #b78d13; }
.gapcount { color: #a35c00; margin-left: .25rem; }

.findpanel {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; background: #fff8e3; border-bottom: 1px solid #e6d9a8;
  position: sticky; top: 44px; z-index: 38;
}
.findbtn {
  font: inherit; font-size: 12.5px; padding: 2px 10px; border-radius: 12px;
  border: 1px solid #b8c0ca; background: #fff; cursor: pointer;
}
.findbtn.full { border-color: #2e7d32; background: #e9f5ea; font-weight: 600; }
.findbtn:hover { background: #eef1f5; }
.findnote { font-size: 12px; }
/* the names are their own wrapping row, so each group heading can claim a
   full line of its own and its people start cleanly underneath it */
#findlist {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  width: 100%; margin: 2px 0;
}
.findgroup {
  flex-basis: 100%;
  font-size: 11px; font-weight: 700; color: #8a6d1a; text-transform: uppercase;
  letter-spacing: .04em; margin-top: 6px;
}
.findgroup:first-child { margin-top: 0; }

/* ---------- forms, dialogs, small pages ---------- */
button.small {
  font: inherit; font-size: 11.5px; padding: 1px 8px; border-radius: 5px;
  border: 1px solid #b8c0ca; background: #fff; cursor: pointer;
}
button.small:hover { background: #eef1f5; }

dialog {
  border: none; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding: 18px 20px; width: 380px; max-width: 92vw;
}
dialog::backdrop { background: rgba(20, 30, 45, .45); }
dialog h3 { margin: 0 0 10px; }
dialog label { display: block; margin: 8px 0; font-size: 13px; color: #3d4653; }
dialog label.row { display: flex; gap: 6px; align-items: center; }
dialog input[type=text], dialog input[type=email], dialog input[type=password], dialog select {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px;
  border: 1px solid #b8c0ca; border-radius: 6px; font: inherit;
}
dialog fieldset { border: 1px solid #d8dee6; border-radius: 8px; margin-top: 10px; }
dialog legend { font-size: 12px; color: #66707d; padding: 0 6px; }
.btnrow { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.btnrow button {
  font: inherit; padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer;
}
.btnrow button[type=submit] { background: var(--cbar-deep); color: #fff; }
.btnrow button.cancel { background: #e2e7ed; }
.btnrow button.danger { background: #fff; color: #b00000; border: 1px solid #d9a0a0; margin-right: auto; }

.authbox {
  max-width: 340px; margin: 12vh auto; background: #fff; padding: 26px 30px;
  border-radius: 12px; box-shadow: 0 6px 30px rgba(0,0,0,.12);
}
.authbox h1 { font-size: 20px; margin: 0 0 12px; color: var(--brand-ink, #17231C); }
.authbox label { display: block; margin: 10px 0; font-size: 13px; color: #3d4653; }
.authbox input { display: block; width: 100%; margin-top: 3px; padding: 7px 9px;
  border: 1px solid #b8c0ca; border-radius: 6px; font: inherit; }
.authbox button { margin-top: 14px; width: 100%; padding: 8px; border: none;
  border-radius: 6px; background: var(--cbar-deep); color: #fff; font: inherit; cursor: pointer; }
.authbox .err { color: #b00000; }

.page { max-width: 760px; margin: 24px auto; background: #fff; padding: 20px 26px;
  border-radius: 10px; }
table.simple { border-collapse: collapse; width: 100%; }
table.simple th, table.simple td { text-align: left; padding: 6px 10px;
  border-bottom: 1px solid #e2e7ed; font-size: 13.5px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.linkrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- company branding ---------- */
.brandform { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; }
.brandform label { font-size: 13px; color: #3d4653; display: grid; gap: 3px; }
.brandform input[type=text], .brandform input[type=email] {
  padding: 6px 8px; border: 1px solid #b8c0ca; border-radius: 6px; font: inherit;
}
.brandform input[type=color] {
  width: 64px; height: 30px; padding: 1px; border: 1px solid #b8c0ca;
  border-radius: 6px; background: #fff; cursor: pointer;
}
.dropzone {
  border: 2px dashed #b8c0ca; border-radius: 10px; padding: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fbfcfd;
}
.dropzone.over { border-color: #1f3a5f; background: #eef4fb; }
.dropinner { cursor: pointer; flex: 1; min-width: 220px; }
.dropnote { display: block; font-size: 12px; color: #8a93a0; margin-top: 2px; }
.dropfile { display: block; font-size: 12.5px; color: #1f3a5f; margin-top: 6px; font-weight: 600; }
.logopreview { max-height: 54px; max-width: 190px; background: #fff;
  border: 1px solid #e2e7ed; border-radius: 6px; padding: 4px; }
.brandbtns { display: flex; gap: 8px; }
.inline-form input { padding: 6px 8px; border: 1px solid #b8c0ca; border-radius: 6px; font: inherit; }
.inline-form button, .page form button { font: inherit; padding: 6px 12px; border-radius: 6px;
  border: none; background: var(--cbar-deep); color: #fff; cursor: pointer; }
.page form button.small { background: #fff; color: #1c2430; border: 1px solid #b8c0ca; }
.page form button.small.danger { color: #b00000; border-color: #d9a0a0; }
.page code { background: #eef1f5; padding: 3px 7px; border-radius: 5px; font-size: 13px; }
.page.wide { max-width: 1080px; }

/* ---------- shared small bits (the old row-tables went in v2.2.0) ---------- */
.abtn {
  font-size: 11.5px; padding: 1px 8px; border-radius: 5px;
  border: 1px solid #b8c0ca; background: #fff; color: #1c2430; text-decoration: none;
}
.abtn:hover { background: #eef1f5; }
.mailmsg { color: #2e7d32; font-weight: 600; }
.mailmsg.err { color: #b00000; }
button.small.danger { color: #b00000; border-color: #d9a0a0; }
.rolelist { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.rolechip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef1f5; border-radius: 14px; padding: 3px 6px 3px 12px; font-size: 13px;
}
.rolechip button { padding: 0 7px; border-radius: 10px; }
.editkey { margin-left: 6px; }

/* bank holiday list on the key page */
.bhrow {
  display: grid; grid-template-columns: 168px 1fr 96px 90px;
  gap: 6px; align-items: center; margin: 3px 0;
}
.bhrow input[type=text], .bhrow input[type=date] {
  padding: 5px 7px; border: 1px solid #d0d6de; border-radius: 6px;
  font: inherit; font-size: 13px; width: 100%;
}
.bhswatch {
  display: inline-block; width: 34px; height: 18px; vertical-align: -4px;
  border: 1px solid #e0b4b4; border-radius: 4px; margin: 0 4px;
}
.bhpast { opacity: .55; }
.bhdate { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---- v2.1.02: warnings, the archived list, and the admin pages on a phone ---- */
.warnnote { background: #fff6e0; border: 1px solid #f0d58a; border-radius: 8px; padding: 9px 13px;
  margin: 10px 0 12px; font-size: 13.5px; color: #4a3a0c; }
table.simple td.right { text-align: right; }
.archlist td { vertical-align: middle; }
@media (max-width: 699px) {
  .page, .page.wide { margin: 12px 8px; padding: 16px 14px; }
  /* bank holidays: date, name, Remove */
  .bhrow { grid-template-columns: 8.8rem 1fr auto; font-size: 13px; }
  .bhrow > .muted, .bhrow > span:empty { display: none; }
}

.filternote {
  padding: 7px 14px; background: #eaf1fb; border-bottom: 1px solid #c3d6ee;
  font-size: 13px;
}
.filternote a { color: #1f3a5f; }

.bookednote {
  padding: 7px 14px; background: #eaf5ea; border-bottom: 1px solid #c6e0c6;
  font-size: 13px;
}


/* ---------- help manual: the shared Clarity layout (spec section 5) ---------- */
.helpidx { max-width: 1000px; margin: 24px auto; padding: 22px 26px; background: #fff;
  border-radius: 10px; box-shadow: 0 1px 3px rgba(23,35,28,.08); }
.helpgrid {
  display: grid; gap: 12px; margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 699px) { .helpgrid { grid-template-columns: minmax(0, 1fr); } }
.helpcard {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--crow-rule); border-radius: 8px; padding: 12px 16px;
}
.helpcard:hover { border-color: var(--cbar-accent); background: #FBFDFB; }
.helpcard strong { display: block; color: var(--cbar-deep); font-weight: 700; font-size: 15px; }
.helpcard span { display: block; color: #5a6672; font-size: 13.5px; margin-top: 2px; }
.helpwrap {
  display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 28px;
  max-width: 1040px; margin: 24px auto; padding: 0 18px; align-items: start;
}
.helpcontents { position: sticky; top: 14px; font-size: 14px; }
.helpcontents > summary { display: none; }
.helpcontents-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #8a93a0; margin: 0 0 6px 10px; font-weight: 600; }
.helpcontents nav a { display: block; padding: 5px 10px; border-radius: 6px; color: #1c2430; text-decoration: none; }
.helpcontents nav a:hover { background: #F2F5F3; }
.helpcontents nav a[aria-current="page"] { background: #EEF2EF; color: var(--cbar-deep); font-weight: 700; }
.helparticle { background: #fff; border-radius: 10px; padding: 20px 26px; box-shadow: 0 1px 3px rgba(23,35,28,.08); min-width: 0; }
@media (max-width: 899px) {
  .helpwrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .helpcontents { position: static; background: #fff; border-radius: 10px; padding: 8px 14px; }
  .helpcontents > summary { display: list-item; cursor: pointer; font-weight: 700; color: var(--cbar-deep); }
  .helpcontents-title { display: none; }
}
.crumb { margin: 0 0 8px; font-size: 12.5px; color: #66707d; }
.crumb a { color: inherit; }
.inshort {
  background: #EEF2EF; border-left: 4px solid var(--cbar-accent); border-radius: 0 6px 6px 0;
  padding: 10px 14px; margin: 12px 0 6px; font-size: 14.5px; max-width: 760px;
}
.inshort strong { color: var(--cbar-deep); margin-right: 6px; }
.related { margin-top: 26px; padding-top: 12px; border-top: 1px solid #e2e7ed; font-size: 14px; color: #5a6672; }
.related a { color: var(--cbar-deep); font-weight: 600; }
.helpback { margin: 18px 0 0; font-weight: 600; }
.helpback a, .helpmore a { color: var(--cbar-deep); }
.helpmore { margin-top: 22px; font-size: 13.5px; color: #5a6672; }
.who {
  font-size: 11.5px; color: #8a93a0; display: block;
}
.who.standalone {
  background: #eef2f6; border-radius: 6px; padding: 5px 10px;
  display: inline-block; margin: 0 0 4px;
}
.eyebrow {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #8a93a0; margin: 0;
}
/* the app's own logo at the head of the manual and of each topic */
.helpmast { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.helpmast img { flex: none; display: block; border-radius: 11px; }
.helpmast h1 { margin: 2px 0 0; font-size: 26px; }
/* "Look for this icon" at the top of the install steps */
.lookfor {
  display: flex; align-items: center; gap: 16px; margin: 4px 0 14px;
  padding: 12px 16px; border: 1px solid #c6e0c6; border-radius: 10px; background: #f1f8ef;
}
.lookfor img { flex: none; display: block; }
.lookfor p { margin: 0; font-size: 14px; max-width: 64ch; }
.helpsec { margin-top: 24px; }
.helpsec h3 {
  font-size: 15px; color: #1f3a5f; margin: 0 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid #e2e7ed;
}
.helpsec p { margin: 0 0 10px; max-width: 68ch; font-size: 14px; }
ol.flow { margin: 0; padding-left: 20px; max-width: 68ch; }
ol.flow li { margin-bottom: 5px; font-size: 14px; }
ul.howto { margin: 0; padding-left: 20px; max-width: 72ch; }
ul.howto li { margin-bottom: 8px; font-size: 14px; }
.helpnav {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 14px; border-top: 1px solid #e2e7ed;
  font-size: 13px;
}
.helpnav a { color: #1f3a5f; text-decoration: none; }
.helpnav a:hover { text-decoration: underline; }
.helpfoot { margin-top: 30px; font-size: 15px; color: #1f3a5f; }
ul.quicklist { max-width: 68ch; font-size: 14px; }
ul.quicklist li { margin-bottom: 5px; }

figure.shot { margin: 0 0 18px; max-width: 760px; }   /* the shared article column */
/* No width here: the <img> carries its SHOWN size (half its 2x pixels, from
   help_content.SHOT_SIZES), so a small picture stays small and sharp instead
   of being stretched to the column - stretching was half the old blur. */
figure.shot img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid #dde3ea; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(24,32,41,.06);
}
figure.shot figcaption {
  font-size: 12.5px; color: #66707d; margin-top: 6px; max-width: 68ch;
}

/* ---------- help: navigation, contextual links, print ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.helpsearch { margin: 16px 0 6px; }   /* full width, per the shared Help */
.helpsearch input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14.5px;
  border: 1px solid #b8c0ca; border-radius: 8px;
}
.helpsearch input:focus { outline: 2px solid var(--cbar-accent); outline-offset: 1px; }
.helpsearch p { margin: 6px 0 0; font-size: 12.5px; min-height: 1em; }
.helpgroup { margin-top: 26px; }
.helpgroup > h2 { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #8a93a0; font-weight: 600; }
.groupblurb { margin: 2px 0 0; font-size: 13px; }
.helptoc {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin: 10px 0 0; font-size: 13px;
}
.helptoc a { color: #1f3a5f; }
ul.related { margin: 0; padding-left: 20px; max-width: 72ch; }
ul.related li { margin-bottom: 6px; font-size: 14px; }
ul.related a { color: #1f3a5f; font-weight: 600; }
.withhelp { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ctxhelp {
  font-size: 12px; font-weight: 500; color: #1f3a5f; text-decoration: none;
  border: 1px solid #c9d4e2; border-radius: 12px; padding: 1px 9px;
  background: #f3f6fa; white-space: nowrap;
}
.ctxhelp:hover { background: #e6edf6; }
.findpanel .ctxhelp { margin-left: 2px; }

/* the one-page manual */
.alltoc {
  display: grid; gap: 4px 28px; margin: 14px 0 6px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.alltoc h3 { font-size: 13px; color: #8a93a0; text-transform: uppercase;
  letter-spacing: .06em; margin: 10px 0 4px; }
.alltoc ol { margin: 0; padding-left: 18px; font-size: 13.5px; }
.alltoc a { color: #1f3a5f; }
.alltopic { margin-top: 38px; padding-top: 22px; border-top: 2px solid #e2e7ed; }
.alltopic > h2 { margin: 2px 0 6px; }
.backtop { font-size: 12.5px; }

@media print {
  .cbar, .crow, .toolbar, .sitefoot, .appbar, .noprint, .helpsearch { display: none !important; }
  body { background: #fff; }
  .page { box-shadow: none; margin: 0; max-width: none; padding: 0; }
  .alltopic { break-before: page; border-top: 0; margin-top: 0; }
  figure.shot { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ==== v2.2.0: the simpler admin pages, Undo, and the key on a phone ======= */
/* buttons: one main (green), one second (white) - the same on every page */
.btn1, .btn2 { font: inherit; font-weight: 600; padding: 7px 14px; border-radius: 6px; cursor: pointer; }
.btn1 { background: var(--cbar-deep); color: #fff; border: 1px solid var(--cbar-deep); }
.btn1:hover { background: #0B7A30; }
.page form button.btn2, .btn2 { background: #fff; color: #1c2430; border: 1px solid #b8c0ca; }
.btn2:hover { background: #F2F5F3; }
.hint { display: block; color: #66707d; font-size: 12px; margin-top: 3px; }
dialog input[type=date], dialog input[type=number] { display: block; width: 100%; margin-top: 3px;
  padding: 6px 8px; border: 1px solid #b8c0ca; border-radius: 6px; font: inherit; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px;
  background: #eef1f5; color: #3d4653; }
.tag-on { background: #DCEBDF; color: var(--cbar-deep); }
.tag-off { background: #f6e3e3; color: #8a1c1c; }

/* Resources: find, add, and a plain list */
.listbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.listbar form { margin: 0; }
.findbox { font: inherit; padding: 7px 11px; border: 1px solid #b8c0ca; border-radius: 6px; width: 17rem; max-width: 100%; }
table.plist { width: 100%; border-collapse: collapse; }
table.plist th { text-align: left; font-size: 12px; font-weight: 600; color: #66707d; text-transform: uppercase;
  letter-spacing: .03em; padding: 6px 10px; border-bottom: 1px solid #d8dee6; }
table.plist td { padding: 7px 10px; border-bottom: 1px solid #edf0f3; font-size: 13.5px; vertical-align: middle; }
table.plist tr.prow:hover td { background: #f7f9f8; }
table.plist .num { text-align: center; }
table.plist td.right, table.simple td.right { text-align: right; }
.pname-btn { display: block; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.pname-btn strong { display: block; }
.pname-btn span { display: block; font-size: 12px; color: #66707d; }
.pname-btn:hover strong { color: var(--cbar-deep); text-decoration: underline; }
.pemail { word-break: break-all; }
.linkbox { margin: 12px 0 2px; padding: 10px 12px; background: #f4f7f5; border: 1px solid #dce5df; border-radius: 8px; font-size: 13px; }
.btnline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.btnline .small, .btnline .abtn { font-size: 12.5px; padding: 3px 10px; }

/* Settings: the key as it looks on the plan */
ol.keylist { list-style: none; margin: 10px 0 12px; padding: 0; }
.keyrow { display: grid; grid-template-columns: auto minmax(12rem, 1fr) auto auto auto; gap: 10px; align-items: center;
  padding: 5px 4px; border-bottom: 1px solid #edf0f3; }
.keyrow.is-hidden .keychip { opacity: .45; }
.keymove { display: flex; gap: 3px; margin: 0; }
.keymove button.small { width: 26px; padding: 1px 0; font-size: 13px; }
.keymove button:disabled { opacity: .3; cursor: default; }
.keychip { justify-self: start; font-size: 13px; }
.keyflags { display: flex; gap: 4px; flex-wrap: wrap; }
.keyuse { font-size: 12px; text-align: right; min-width: 5.5rem; }
.keypreview { margin: 0 0 6px; }
.keypreview .chip { font-size: 14px; padding: 4px 12px; cursor: default; }
.keyline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.keyline label { margin: 4px 0; }
.keyline input[type=text] { width: 4rem; text-align: center; font-weight: 700; }
.keyline input[type=color] { display: block; width: 52px; height: 32px; padding: 1px; border: 1px solid #b8c0ca; border-radius: 6px; background: #fff; }
dialog label.tick { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; margin: 9px 0; }
dialog label.tick input { margin-top: 2px; flex: none; }
dialog#dlg-key { width: 460px; }
.keynote { font-size: 12.5px; margin: 8px 0 0; }
h3.bhsub { font-size: 14px; margin: 14px 0 4px; }
details.bhfold { margin: 10px 0; }
details.bhfold > summary { cursor: pointer; color: var(--cbar-deep); font-weight: 600; font-size: 13.5px; padding: 4px 0; }
.bhadd { margin-top: 6px; }
details.pwfold { margin-top: 26px; border-top: 1px solid #e2e7ed; padding-top: 14px; }
details.pwfold > summary { cursor: pointer; color: var(--cbar-deep); font-weight: 600; margin-bottom: 10px; }
.brandbtns { align-items: center; }

/* the plan on a phone: the colour key is ONE row that scrolls sideways,
   so the plan starts near the top instead of below eight rows of colours */
@media (max-width: 699px) {
  body.planpage > .toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.planpage > .toolbar > * { flex: none; }
  body.planpage > .toolbar .hint { display: none; }
  table.plist thead { display: none; }
  table.plist tr.prow { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid #edf0f3; }
  table.plist tr.prow td { border: 0; padding: 2px 4px; }
  table.plist tr.prow td:nth-child(n+2):nth-child(-n+6) { grid-column: 1; font-size: 12.5px; color: #3d4653; }
  table.plist tr.prow td:nth-child(5), table.plist tr.prow td:nth-child(6) { display: none; }
  table.plist tr.prow td:last-child { grid-column: 2; grid-row: 1; }
  .keyrow { grid-template-columns: auto 1fr auto; }
  .keyflags, .keyuse { display: none; }
}
/* ==== end of v2.2.0 ===================================================== */