/* =====================================================================================
   The add dock (core/quick_add.py, templates/components/quick_add.html), 20 October 2026.
   Round icon buttons to record a risk, a control, a management letter point, an adjustment,
   a review note, a client request or an inquiry from any page of a file.

   - The dock is a v2 root of its own (<nav class="t2 qa-dock">), so it takes the v2 tokens and the
     person's light or dark setting on a page not yet converted too. Everything is under .qa-dock.
   - Wide screens: a slim column fixed to the right edge, vertically centred, 40px round buttons with
     8px gaps on a softly raised surface. Phones (44rem and narrower, or a window under 26rem tall):
     a row fixed along the bottom, above the demonstration notice on a converted page (shell.js sets
     --qa-banner-h to the notice's height; --qa-banner-fallback is the guess without script). The
     page gets bottom padding there, and right padding on a wide screen narrow enough for the column
     to reach the page, so the dock never covers the page's own content.
   - Not a solid button: the page keeps its one t2-btn--primary.
   - Colour names the kind of record (what you are adding), so it does not follow Colour accents;
     a risk reads as the problem red, the rest as the four v2 hues and a yellow of its own (an inquiry is the lagoon
     family's lighter step).

   Contrast (WCAG 2.x, computed from the tokens; icon and boundary need 3:1, tooltip text 4.5:1)
   kind          fill light  fill dark   icon on fill light / dark   fill on dock surface light / dark
   risk          #B3261E     #FF9F97     6.54 / 8.24                 6.48 / 7.25
   inquiry       #4A8CA7     #4F98B0     3.75 / 4.99                 3.72 / 4.39   (the lagoon mid, so it reads as
                                                                                   the control's family, a step lighter)
   control       #246C8C     #8CC8DC     5.84 / 8.82                 5.79 / 7.77
   letter        #F2C230     #F2C230     7.89 / 7.89                 1.66 / 8.53   (light: a 1.5px #8A6400
                                                                                   edge, 5.33 on the surface)
   adjustment    #6E4880     #D0AEDD     7.24 / 8.33                 7.18 / 7.34
   review note   #434F98     #AEB5EE     7.47 / 8.23                 7.41 / 7.24
   client req.   #55626F     #B4BFCA     6.24 / 8.69                 6.19 / 7.65
   tooltip text on --band: 8.02 light, 10.16 dark. Focus ring (--focus) on the surface: 5.41 / 7.88.
   Icon ink is --on-accent (white in light, the dark ground in dark); the letter's is #3D2E00.
   ===================================================================================== */

/* The dock: its own root, so no ground colour of its own and no page layout. */
.t2.qa-dock {
  position: fixed;
  z-index: 30;
  top: 0;
  bottom: 0;
  right: 0.75rem;
  height: max-content;
  margin-block: auto;
  background: transparent;
}
/* How far up from the bottom of the window the phone row sits: the demonstration notice's height. It is read
   on the body so the page's own padding (below) can use it too. */
body { --qa-bottom: var(--qa-banner-h, var(--qa-banner-fallback, 0px)); }
body:has(main.t2-page) { --qa-banner-fallback: 4.5rem; }

.t2.qa-dock .qa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-panel);
}

/* One button: an icon in a filled circle. */
.t2.qa-dock .qa-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--qa-fill);
  color: var(--qa-ink);
  box-shadow: inset 0 0 0 1.5px var(--qa-edge, transparent);
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.t2.qa-dock .qa-btn:hover { text-decoration: none; transform: scale(1.08); }
.t2.qa-dock .qa-btn:active { transform: scale(0.97); }
.t2.qa-dock .qa-btn .t2-ico { width: 22px; height: 22px; stroke-width: 1.75; }
/* The v2 focus rule squares a focused element's corners; the circle stays a circle, with a gap before the ring. */
.t2.qa-dock .qa-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 50%; }

.t2.qa-dock .qa-btn[data-kind="risk"]       { --qa-fill: var(--problem);    --qa-ink: var(--on-accent); }
.t2.qa-dock .qa-btn[data-kind="inquiry"]    { --qa-fill: var(--hue-lagoon-mid); --qa-ink: var(--on-accent); }
.t2.qa-dock .qa-btn[data-kind="control"]    { --qa-fill: var(--hue-lagoon); --qa-ink: var(--on-accent); }
.t2.qa-dock .qa-btn[data-kind="letter"]     { --qa-fill: #F2C230;           --qa-ink: #3D2E00; --qa-edge: #8A6400; }
.t2.qa-dock .qa-btn[data-kind="adjustment"] { --qa-fill: var(--hue-plum);   --qa-ink: var(--on-accent); }
.t2.qa-dock .qa-btn[data-kind="note"]       { --qa-fill: var(--hue-indigo); --qa-ink: var(--on-accent); }
.t2.qa-dock .qa-btn[data-kind="request"]    { --qa-fill: var(--hue-slate);  --qa-ink: var(--on-accent); }

/* The tooltip: the button's name, to its left on a wide screen. It shows on hover and on keyboard focus,
   and stays while the pointer is on it (the ::before bridges the gap). */
.t2.qa-dock .qa-tip {
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--band-line);
  border-radius: var(--r-ctl);
  background: var(--band);
  color: var(--on-band);
  box-shadow: 0 0 0 1px var(--band-rim), var(--shadow-panel);
  font-size: var(--fs-chip);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.t2.qa-dock .qa-tip::before { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 0.75rem; }
.t2.qa-dock .qa-btn:hover .qa-tip,
.t2.qa-dock .qa-btn:focus-visible .qa-tip { opacity: 1; visibility: visible; }

/* A page the column could reach: keep the page's right edge clear of it. */
@media (min-width: 44.01rem) and (max-width: 98rem) and (min-height: 26.01rem) {
  html body:has(.qa-dock) :is(.t2-page, main.page) { padding-right: calc(var(--gutter, 2.5rem) + 3.5rem); }
}

/* Phones, and windows too short for the column: a row along the bottom, above the demonstration notice. */
@media (max-width: 44rem), (max-height: 26rem) {
  .t2.qa-dock {
    top: auto;
    bottom: var(--qa-bottom);
    left: 0;
    right: 0;
    height: auto;
    margin: 0;
    padding: 0 0.5rem 0.5rem;
    display: flex;
    justify-content: center;
    pointer-events: none;   /* only the row takes a tap, so the page beside it still scrolls */
  }
  .t2.qa-dock .qa-list { flex-direction: row; gap: 10px; padding: 8px 12px; pointer-events: auto; }
  .t2.qa-dock .qa-tip { right: auto; left: 50%; top: auto; bottom: calc(100% + 0.625rem); transform: translateX(-50%); }
  .t2.qa-dock .qa-tip::before { top: 100%; bottom: auto; left: 0; right: 0; width: auto; height: 0.625rem; }
  /* The outer buttons' tooltips start at the button, so none runs off the screen. */
  .t2.qa-dock li:nth-child(-n+2) .qa-tip { left: 0; transform: none; }
  .t2.qa-dock li:nth-last-child(-n+2) .qa-tip { left: auto; right: 0; transform: none; }
  html body:has(.qa-dock) :is(.t2-page, main.page) { padding-bottom: calc(var(--qa-bottom) + 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .t2.qa-dock .qa-btn, .t2.qa-dock .qa-tip { transition: none; }
  .t2.qa-dock .qa-btn:hover, .t2.qa-dock .qa-btn:active { transform: none; }
}
@media (forced-colors: active) {
  .t2.qa-dock .qa-btn { border: 1px solid ButtonText; }
}
@media print { .t2.qa-dock { display: none !important; } }