/* =====================================================================================
   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 (31 October 2026, Senyo's feedback): a slim column fixed to the right edge, vertically
     centred, 40px round buttons with 8px gaps and no surface behind them, so only the icons show. A toggle
     under them puts each name beside its icon on demand; the choice is kept in this browser (quickadd.js). 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: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 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);
  /* A soft light from above and a shadow of the button's own colour, so it sits on any page without a surface. */
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 55%);
  color: var(--qa-ink);
  box-shadow: inset 0 0 0 1.5px var(--qa-edge, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22),
              0 1px 2px rgb(0 0 0 / 0.14), 0 6px 14px -6px var(--qa-fill);
  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; }

/* The toggle under the icons: names beside the icons, or icons only. Drawn only with script. */
.t2.qa-dock .qa-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 28px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.t2.qa-dock .qa-toggle[hidden] { display: none; }
.t2.qa-dock .qa-toggle:hover { color: var(--text); background: var(--surface-sunk); }
.t2.qa-dock .qa-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t2.qa-dock .qa-toggle .t2-ico { width: 18px; height: 18px; transform: rotate(180deg);
                                 transition: transform var(--dur) var(--ease); }
.t2.qa-dock .qa-toggle[aria-expanded="true"] .t2-ico { transform: none; }
/* Open: each name stays beside its icon, on the band so it reads on any page. */
.t2.qa-dock.qa-dock--open .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;
                         background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
                         box-shadow: var(--shadow-panel); }
  .t2.qa-dock .qa-toggle { display: none; }
  .t2.qa-dock.qa-dock--open .qa-tip { opacity: 0; visibility: hidden; }
  .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, .t2.qa-panel, .qa-scrim { display: none !important; } }

/* The add panel (quickadd.js): the create page, or the list of files, in a panel over the page, which stays
   where it is. It opens from the right, beside the rail. Saving or leaving the form closes it and reads the
   page again, so what was added shows. */
.qa-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 0.32);
}
.t2.qa-panel {
  position: fixed;
  z-index: 41;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(44rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  animation: qa-in var(--dur) var(--ease);
}
@keyframes qa-in { from { transform: translateX(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
.t2.qa-panel .qa-panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.t2.qa-panel .qa-panel__head h2 { flex: 1; margin: 0; font-size: var(--fs-h3, 1.25rem); }
.t2.qa-panel .qa-panel__body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.t2.qa-panel .qa-panel__body .t2-head h1 { font-size: var(--fs-h2, 1.75rem); }
.t2.qa-panel .qa-panel__body .t2-layout { display: block; }
.t2.qa-panel .qa-panel__body[aria-busy="true"] { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .t2.qa-panel { animation: none; } }

/* The list of files on a page about no file (core/quick_add_choose.html): one file a row. */
.qa-choices { margin: 0 0 1.5rem; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.t2 .qa-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.125rem 1rem;
  align-items: center;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.t2 .qa-choice:hover { text-decoration: none; background: var(--surface-sunk); }
.t2 .qa-choice:hover .qa-choice__client { text-decoration: underline; }
.qa-choice__client { font-weight: 600; }
.qa-choice__name { grid-column: 1; color: var(--text-secondary); }
.qa-choice .t2-ico { grid-column: 2; grid-row: 1 / span 2; }