/* Campaign Planner components. One rule set for every shared primitive that
   src/ui.js renders and that controls.js, selects.js, people-combobox.js and
   contacts.js create at runtime. Tokens live in foundations.css; the class API
   is docs/design-system.md §3 and §6. Features compose these classes and never
   restyle them. */

/* Icons -------------------------------------------------------------------- */
.br-icon{width:var(--icon-size);height:var(--icon-size);flex:0 0 auto}
/* Icon actions, app-wide (ui iconButton, Roger's receipt; the kit's IconButton below does the same): the glyph
   rests at --icon-rest so a row of Undo, View and Edit never outweighs the content, and comes to full strength
   on hover, keyboard focus, while its menu is open or it is pressed. Disabled keeps its own colour at full
   strength. A toast's action stays at full strength: the toast exists only to offer it. */
:is(.compact-icon,.roger-receipt-show)>.br-icon{opacity:var(--icon-rest);transition:opacity var(--motion-fast) var(--ease-rise)}
:is(.compact-icon,.roger-receipt-show):is(:hover,:focus-visible,[aria-expanded=true],[aria-pressed=true],:disabled)>.br-icon,
.roger-receipt-list[open]>.roger-receipt-show>.br-icon,.roger-send>.br-icon{opacity:1}

/* Buttons ------------------------------------------------------------------ */
.primary,.secondary,.tertiary,.text-button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control);padding:0 var(--space-6);border:0;border-radius:var(--radius-m);
  font-size:var(--text-m);font-weight:var(--weight-medium);line-height:var(--leading-tight);
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--motion-fast),color var(--motion-fast);
}
.primary{background:var(--accent);color:var(--accent-ink)}
.primary:hover:not(:disabled){background:var(--accent-hover);color:var(--accent-hover-ink)}
.primary:active:not(:disabled){background:var(--subtle);color:var(--accent-hover-ink)}
.primary.is-destructive{background:var(--ink-alert);color:var(--page)}
.primary.is-destructive:hover:not(:disabled){background:var(--ink);color:var(--page)}
.secondary{background:var(--ink);color:var(--page)}
.secondary:hover:not(:disabled){background:var(--ink-hover)}
.tertiary{background:var(--element);color:var(--ink)}
.tertiary:hover:not(:disabled),.tertiary[aria-expanded=true]{background:var(--element-hover)}
.text-button{position:relative;isolation:isolate;min-height:var(--control-sm);padding:0 var(--space-1);background:transparent;color:var(--ink);transition:background-color var(--motion-fast),color var(--motion-fast),transform var(--motion-cursor) var(--ease-out)}
/* A text button answers as a button, not a link: a plate rises behind its words under the pointer or the keyboard
   (::before, past the box, so nothing moves), a step deeper and pressed in while held. */
.text-button::before{content:'';position:absolute;inset:calc(var(--space-1) / 2) calc(var(--space-1) * -1);z-index:-1;border-radius:var(--radius-s);background:var(--plate);opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-rise),background-color var(--motion-fast) var(--ease-rise)}
.text-button:is(:hover,:focus-visible):not(:disabled)::before{opacity:1}
.text-button:active:not(:disabled){transform:scale(.97)}
.text-button:active:not(:disabled)::before{background:var(--plate-hover)}
.text-button:focus-visible{outline:0}
.text-button:focus-visible::before{box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
.text-button.is-destructive::before{background:var(--tint-alert)}
.text-button.is-destructive:active:not(:disabled)::before{background:color-mix(in srgb,var(--ink-alert) 16%,var(--tint-alert))}
.tertiary.is-destructive,.text-button.is-destructive,.compact-icon.is-destructive{color:var(--ink-alert)}
:is(.primary,.secondary,.tertiary):disabled{background:var(--element);color:var(--disabled)}
.text-button:disabled{color:var(--disabled)}
:is(.primary,.secondary,.tertiary,.text-button).small{min-height:var(--control-sm);padding:0 var(--space-4);font-size:var(--text-s)}
.text-button.small{padding:0 var(--space-1)}
:is(.primary,.secondary,.tertiary)>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Optional hint after the label (a date, a period, a count). */
:is(.primary,.secondary,.tertiary,.text-button)>small{font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-tight);color:inherit;opacity:.72}
/* Icon-only buttons keep a square target. */
:is(.primary,.secondary,.tertiary):has(>.br-icon:only-child){width:var(--control);padding:0}
:is(.primary,.secondary,.tertiary).small:has(>.br-icon:only-child){width:var(--control-sm)}

.compact-icon{
  display:inline-grid;place-items:center;flex:0 0 auto;width:var(--icon-target);height:var(--icon-target);
  padding:0;border:0;border-radius:var(--radius-m);background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color var(--motion-fast),color var(--motion-fast);
}
.compact-icon:hover:not(:disabled){background:var(--element)}
.compact-icon:active:not(:disabled),.compact-icon[aria-expanded=true]{background:var(--element-hover)}
.compact-icon:disabled{color:var(--disabled)}
.compact-icon.small{width:var(--icon-target-sm);height:var(--icon-target-sm)}
.compact-icon.dense{width:calc(var(--icon-target-sm) - var(--space-1));height:calc(var(--icon-target-sm) - var(--space-1));border-radius:var(--radius-s)}
/* Section-level edit action: quiet until the section is hovered or focused. */
.has-edit-affordance .edit-affordance{opacity:0;transition:opacity var(--motion-fast),background-color var(--motion-fast)}
.has-edit-affordance:hover .edit-affordance,.has-edit-affordance:focus-within .edit-affordance,.has-edit-affordance .edit-affordance:focus-visible{opacity:1}
@media(hover:none){.has-edit-affordance .edit-affordance{opacity:1}}

/* Labels and people -------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font:var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);
}
/* Status is content, not a label: sentence case in the brand face. Tints carry the tone with ink
   text (tinted ink on tints fails contrast at 12 px) and a leading dot repeats it for quick scanning. */
.badge{
  display:inline-flex;align-items:center;gap:6px;height:22px;max-width:100%;
  padding:0 var(--space-2);border-radius:var(--radius-full);background:var(--plate);color:var(--subtle);
  font:var(--weight-medium) var(--text-xs)/1 var(--font-brand);letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-variant-numeric:tabular-nums;
}
.badge-positive,.badge-attention,.badge-alert{color:var(--ink)}
.badge-positive::before,.badge-attention::before,.badge-alert::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}
.badge-positive{background:var(--tint-positive)}
.badge-positive::before{background:var(--ink-positive)}
.badge-attention{background:var(--tint-attention)}
.badge-attention::before{background:var(--ink-attention)}
.badge-alert{background:var(--tint-alert)}
.badge-alert::before{background:var(--ink-alert)}
.badge-dark{background:var(--ink);color:var(--page)}
/* A communications phase in its brand tint, always with ink text. */
.badge-phase{color:var(--ink);background:var(--tone-0)}
.badge-phase.tone-1{background:var(--tone-1)}
.badge-phase.tone-2{background:var(--tone-2)}
.badge-phase.tone-3{background:var(--tone-3)}

.chip{
  display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;min-height:var(--control-sm);
  padding:0 var(--space-3) 0 var(--space-2);border:0;border-radius:var(--radius-full);
  background:var(--plate);color:var(--ink);font-size:var(--text-s);font-weight:var(--weight-regular);
  line-height:var(--leading-snug);text-align:left;white-space:nowrap;vertical-align:middle;
}
button.chip{cursor:pointer;transition:background-color var(--motion-fast),box-shadow var(--motion-fast)}
button.chip:hover,button.chip[aria-expanded=true]{background:var(--plate-hover)}
button.chip:active{background:var(--plate-active)}
.chip>.br-icon:first-child{color:var(--muted)}
.chip>.br-icon:last-child:not(:first-child){width:var(--space-4);height:var(--space-4);margin-left:calc(var(--space-1) * -1);color:var(--muted)}
.chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.chip-role{color:var(--muted);font-size:var(--text-xs)}
.chip.is-empty{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
button.chip.is-empty:hover{background:var(--plate);color:var(--ink)}
.chip.is-compact{position:relative;justify-content:center;width:var(--control-sm);padding:0;background:transparent}
.chip .status-dot{margin-left:calc(var(--space-1) * -1)}
/* A compact chip is the avatar alone; its status dot sits on the avatar's lower right edge. */
.chip.is-compact>.status-dot{position:absolute;right:5px;bottom:5px;margin:0;box-shadow:0 0 0 2px var(--page)}
button.chip.is-compact:hover>.status-dot,button.chip.is-compact[aria-expanded=true]>.status-dot{box-shadow:0 0 0 2px var(--plate-hover)}

.avatar{
  position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--label-height);height:var(--label-height);
  border-radius:var(--radius-full);background:var(--plate-active);color:var(--ink);overflow:hidden;
  font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1;text-transform:uppercase;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.avatar-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-lg{width:var(--space-8);height:var(--space-8)}
.avatar-xl{width:var(--space-10);height:var(--space-10);font-size:var(--text-s)}

.status-dot{display:inline-block;flex:0 0 auto;width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--disabled);vertical-align:middle}
.status-dot.is-positive{background:var(--accent)}
.status-dot.is-attention{background:var(--ink-attention)}
.status-dot.is-alert{background:var(--ink-alert)}
.status-dot.is-open{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}

/* Fields -------------------------------------------------------------------- */
/* The underlined BLACKROLL account field, wherever a form lives. Low specificity
   so boxed inputs, checks and the hidden native select override it below. */
:where(.field,dialog,.sheet,#workflow-form) :where(input:not([type=checkbox],[type=radio],[type=range],[type=file]),textarea,select){
  display:block;width:100%;min-width:0;min-height:var(--control);margin:0;padding:var(--space-3) 0;
  border:0;border-bottom:1px solid var(--line-field);border-radius:0;background:transparent;color:var(--ink);
  font:var(--weight-regular) var(--text-m)/var(--leading-normal) var(--font-brand);
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast);
}
:where(.field,dialog,.sheet,#workflow-form) :where(textarea){min-height:calc(var(--control) + var(--space-6));resize:vertical}
:where(.field,dialog,.sheet,#workflow-form) :where(input:not([type=checkbox],[type=radio],[type=range],[type=file]),textarea,select):focus-visible{outline:0;border-bottom-color:var(--focus-ring);box-shadow:none}
:where(.field,dialog,.sheet,#workflow-form) :where(input,textarea):read-only:not(:placeholder-shown){color:var(--subtle)}
:where(.field,dialog,.sheet,#workflow-form) :where(input,textarea,select):disabled{color:var(--disabled);border-bottom-style:dashed}
/* Bare labels in dialogs and forms share the field rhythm. */
:where(dialog,.sheet,#workflow-form) label:where(:not(.check,.input-box)){display:block;margin:var(--space-6) 0 var(--space-2);font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-normal);color:var(--ink)}
:where(.dialog-body)>label:first-child,:where(.dialog-body)>.dialog-intro+label{margin-top:0}

.field{display:grid;gap:var(--space-2);min-width:0;margin:0}
.field>label{margin:0;font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-normal);color:var(--ink)}
.field-note,.form-note,.contact-popover-note{margin:0;font-size:var(--text-s);line-height:var(--leading-normal);color:var(--muted)}
.field-error{margin:0;font-size:var(--text-s);line-height:var(--leading-normal);color:var(--ink-alert)}
.field.has-error :is(input,textarea,select,.select-trigger){border-bottom-color:var(--ink-alert)}
/* A prose field that grows with its text; its containing editor owns scrolling. */

/* Two fields side by side in dialogs; one column on small screens. field-wide spans both. */
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-6);min-width:0}
.field-grid>.field-wide{grid-column:1 / -1}
/* A labelled group of check rows. */
.check-group{display:grid;gap:var(--space-2);min-width:0;margin:0;padding:0;border:0}
.check-group>legend{display:block;float:none;width:100%;margin:0 0 var(--space-1);padding:0}
.check-group>.check{padding:0}
/* Form rhythm: 16 px between stacked blocks, none inside a grid. */
:is(.field,.field-grid,.check,.check-group)+:is(.field,.field-grid,.check-group),:is(.field,.field-grid,.check-group)+.check{margin-top:var(--space-4)}
/* Grid cells sit side by side: no stacking gap. Matches the specificity of the rule above, which it follows. */
:is(.field-grid,.check-group)>:is(.field,.field-grid,.check,.check-group,*){margin-top:0}

/* Account entry for the full-page gate. */
.account-entry{display:grid;gap:var(--space-6);width:100%;min-width:0}
.account-entry-heading{display:grid;gap:var(--space-3)}
.account-entry-heading :is(h1,h2){margin:0;font-size:var(--text-2xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
.account-entry-heading p{margin:0;color:var(--muted);font-size:var(--text-m);line-height:var(--leading-normal)}
.account-google{width:100%;min-height:var(--control-lg);gap:var(--space-3);border:1px solid var(--line);background:transparent;color:var(--ink)}
.account-google:hover:not(:disabled){background:var(--plate);border-color:var(--ink)}
.account-google>.button-image{width:20px;height:20px;object-fit:contain}
.account-divider{display:flex;align-items:center;gap:var(--space-4);color:var(--muted);font-size:var(--text-xs);line-height:var(--leading-normal)}
.account-divider::before,.account-divider::after{content:'';height:1px;flex:1;background:var(--line-soft)}
.account-form{display:grid;gap:var(--space-5);min-width:0}
.account-field{display:grid;gap:var(--space-2);min-width:0}
.account-field>label,.account-field-label>label{display:block;margin:0;color:var(--ink);font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-normal)}
.account-field-label{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-width:0}
.account-forgot{margin-block:calc(var(--space-2) * -1);padding:0;font-size:var(--text-xs);color:var(--muted)}
.account-forgot:hover{color:var(--ink)}
.account-field>small{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.account-field input{display:block;width:100%;min-width:0;min-height:var(--control-lg);margin:0;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-m);background:transparent;color:var(--ink);font:inherit;font-size:var(--text-m);line-height:var(--leading-normal);transition:border-color var(--motion-fast),background-color var(--motion-fast)}
.account-field input:hover{border-color:var(--muted)}
.account-field input:focus-visible{outline:0;border-color:var(--focus-ring);box-shadow:var(--focus-field)}
.account-password{position:relative}
.account-password>input{padding-right:calc(var(--space-16) + var(--space-3))}
.account-password-toggle{position:absolute;inset:var(--space-2) var(--space-2) var(--space-2) auto;min-width:var(--control);padding-inline:var(--space-2);border-radius:var(--radius-s);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--muted)}
.account-password-toggle:hover{background:var(--plate);color:var(--ink)}
.account-submit{width:100%;min-height:var(--control-lg);justify-content:space-between;margin-top:var(--space-1)}
.account-notice{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-s);background:var(--tint-alert);color:var(--ink-alert);font-size:var(--text-s);line-height:var(--leading-normal);overflow-wrap:anywhere}
.account-notice:empty{display:none}
.account-notice.is-success{color:var(--ink-positive);background:var(--tint-positive)}
.account-switch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--space-1);margin:0;color:var(--muted);font-size:var(--text-s);line-height:var(--leading-normal)}
.account-switch>.text-button{min-height:var(--icon-target-sm);font-size:var(--text-s);text-decoration:underline;text-underline-offset:3px}
/* "Already have an account? Sign in" is a link in a sentence: it stays a link (underlined at rest), with no plate. */
.account-switch>.text-button::before{content:none}
.account-switch>.text-button:active:not(:disabled){transform:none}
.account-entry[aria-busy=true]{cursor:progress}

/* Boxed input for toolbars and dense rows. */
.input-box{
  display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-sm);min-width:0;
  padding:0 var(--space-3);border-radius:var(--radius-m);background:var(--element);color:var(--ink);
  font-size:var(--text-s);cursor:text;transition:background-color var(--motion-fast);
}
.input-box:hover{background:var(--element-hover)}
.input-box:focus-within{outline:0;box-shadow:var(--focus-field)}
.input-box>input{flex:1 1 auto;width:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;background:transparent;color:inherit;font-size:var(--text-s);line-height:var(--leading-snug)}
.input-box>input:focus-visible{outline:0;box-shadow:none}
.input-box>input::-webkit-search-decoration,.input-box>input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.input-search>.br-icon{color:var(--muted)}

/* Custom select from selects.js. Underlined in forms, tertiary in toolbars. */
.select-control{position:relative;display:block;min-width:0}
.select-control>.select-native{display:none}
.select-trigger{
  display:flex;align-items:center;gap:var(--space-3);width:100%;min-width:0;min-height:var(--control);
  padding:var(--space-3) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  color:var(--ink);font-size:var(--text-m);font-weight:var(--weight-regular);line-height:var(--leading-normal);
  text-align:left;cursor:pointer;transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast);
}
.select-trigger>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-trigger>.br-icon{color:var(--muted);transition:transform var(--motion-fast)}
.select-trigger[aria-expanded=true]{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.select-trigger[aria-expanded=true]>.br-icon{transform:rotate(180deg)}
.select-trigger:disabled{color:var(--disabled);border-bottom-style:dashed;cursor:default}
.select-control.is-toolbar{display:inline-block;width:auto;max-width:100%;vertical-align:middle}
.select-control.is-toolbar>.select-trigger{
  width:auto;max-width:100%;min-height:var(--control-sm);gap:var(--space-2);padding:0 var(--space-3) 0 var(--space-4);
  border:0;border-radius:var(--radius-m);background:var(--element);font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-tight);box-shadow:none;
}
.select-control.is-toolbar>.select-trigger>.br-icon{color:var(--ink)}
.select-control.is-toolbar>.select-trigger:hover:not(:disabled),.select-control.is-toolbar>.select-trigger[aria-expanded=true]{background:var(--element-hover)}
.select-control.is-toolbar>.select-trigger:disabled{background:var(--element);color:var(--disabled)}

/* Date picker from date-picker.js. The native date input stays the value source; the trigger reads
   like a select (underlined in forms) and the month grid replaces the browser's own popup. */
.date-control{position:relative;display:block;min-width:0}
.date-control>.date-native{position:absolute;left:0;bottom:0;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none}
.date-trigger.is-empty>span{color:var(--muted)}
.date-trigger[aria-expanded=true]>.br-icon{transform:none;color:var(--ink)}
.date-menu{width:min(304px,100vw - var(--space-6));padding:var(--space-3) var(--space-3) var(--space-2)}
.date-menu-header{display:flex;align-items:center;gap:var(--space-1);margin:0 0 var(--space-2)}
.date-menu-title{flex:1 1 auto;min-width:0;margin:0;padding-left:var(--space-2);font-size:var(--text-m);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:0}
.date-grid{display:grid;gap:2px}
.date-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.date-weekday{display:grid;place-items:center;height:var(--space-8);font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.date-day{
  display:grid;place-items:center;justify-self:center;width:var(--icon-target-sm);height:var(--icon-target-sm);padding:0;border:0;border-radius:var(--radius-full);
  background:transparent;color:var(--ink);font-size:var(--text-s);font-weight:var(--weight-regular);line-height:1;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background-color var(--motion-fast),color var(--motion-fast);
}
.date-day:hover{background:var(--plate-hover)}
.date-day.is-outside{color:var(--disabled)}
.date-day.is-today{box-shadow:inset 0 0 0 1px var(--ink);font-weight:var(--weight-medium)}
.date-day[aria-selected=true]{background:var(--ink);color:var(--page);font-weight:var(--weight-medium)}
.date-menu-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--line-soft)}

/* Checkbox and radio rows (a switch is the kit's check, type 'switch'). */
.check{display:flex;align-items:flex-start;gap:var(--space-3);min-height:var(--control-sm);margin:0;padding:var(--space-1) 0;font-size:var(--text-m);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--ink);cursor:pointer}
.check>input{
  appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:var(--space-6);height:var(--space-6);min-height:0;margin:0;padding:0;border:var(--stroke) solid var(--line-field);border-radius:var(--radius-s);
  background:var(--page);cursor:pointer;transition:background-color var(--motion-fast),border-color var(--motion-fast);
}
.check>input[type=radio]{border-radius:var(--radius-full)}
.check:hover>input:not(:disabled){border-color:var(--ink)}
.check>input:checked{background:var(--ink);border-color:var(--ink)}
.check>input:checked::after{content:'';display:block;width:var(--space-2);height:var(--space-3);margin-top:-2px;border:solid var(--page);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check>input[type=radio]:checked::after{width:var(--space-2);height:var(--space-2);margin:0;border:0;border-radius:var(--radius-full);background:var(--page);transform:none}
.check>input:disabled{border-color:var(--line-soft);background:var(--element);cursor:default}
.check>input:disabled:checked{background:var(--disabled);border-color:transparent}
.check-copy{display:grid;gap:2px;min-width:0;padding-top:1px}
.check-copy>small{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}

/* Exclusive choice shown as one control. */
.segmented{display:inline-flex;gap:2px;max-width:100%;padding:2px;border-radius:var(--radius-m);background:var(--element);vertical-align:middle}
.segmented>button{
  min-height:calc(var(--control-sm) - var(--space-1));padding:0 var(--space-3);border:0;border-radius:var(--radius-s);background:transparent;color:var(--subtle);
  font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-tight);white-space:nowrap;cursor:pointer;
  transition:background-color var(--motion-fast),color var(--motion-fast);
}
.segmented>button:hover:not(:disabled):not([aria-pressed=true]){color:var(--ink)}
.segmented>button[aria-pressed=true]{background:var(--ink);color:var(--page)}
.segmented>button:disabled{color:var(--disabled)}
.segmented.small>button{min-height:calc(var(--space-6) + var(--space-1));padding:0 var(--space-2);font-size:var(--text-xs)}

/* File drop: a plate that invites a drag and holds the picker. */
.file-drop{
  display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-6);border:1px dashed transparent;border-radius:var(--radius-l);
  background:var(--plate);color:var(--ink);text-align:center;transition:background-color var(--motion-fast),border-color var(--motion-fast);
}
.file-drop>p,.file-drop>span{margin:0;font-size:var(--text-s);color:var(--subtle)}
.file-drop>small{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.file-drop.is-dragging,.dragging-files .file-drop{border-color:var(--line);background:var(--plate-hover)}

/* Overlays ------------------------------------------------------------------ */
@keyframes rise-in{from{opacity:0;transform:translateY(var(--space-2))}to{opacity:1;transform:none}}
@keyframes slide-in{from{opacity:0;transform:translateX(var(--space-2))}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.is-entering{animation:rise-in var(--motion-enter) var(--ease-rise)}

/* Shared floating surface. Position and size are set by the controlling script. Floats take --float as their
   page (a step above the page on the dark appearance), so what sits inside them matches it. */
.control-menu,.select-menu,.date-menu,.contact-popover,.people-combobox-list{
  --page:var(--float);position:fixed;z-index:var(--z-float);box-sizing:border-box;min-width:0;padding:var(--space-2);border:0;border-radius:var(--radius-l);
  background:var(--page);color:var(--ink);box-shadow:var(--shadow-float);overflow-y:auto;overscroll-behavior:contain;
}
.control-menu{min-width:min(var(--nav-width),100vw - var(--space-6));max-width:300px}
.control-menu :is([role=menuitem],[role=menuitemradio]),.menu-link,.select-option,.people-combobox-option{
  display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--icon-target);margin:0;padding:0 var(--space-3);
  border:0;border-radius:var(--radius-s);background:transparent;color:var(--ink);text-align:left;text-decoration:none;
  font-size:var(--text-s);font-weight:var(--weight-regular);line-height:var(--leading-snug);cursor:pointer;
  transition:background-color var(--motion-fast),color var(--motion-fast);
}
.control-menu :is([role=menuitem],[role=menuitemradio])>.br-icon,.menu-link>.br-icon{color:var(--subtle)}
.control-menu :is([role=menuitem],[role=menuitemradio])>span,.menu-link>span{flex:1 1 auto;min-width:0;display:grid;gap:2px;overflow-wrap:anywhere}
.control-menu :is([role=menuitem],[role=menuitemradio]) small,.menu-link small{display:block;font-size:var(--text-xs);line-height:var(--leading-snug);color:var(--muted)}
.control-menu :is([role=menuitem],[role=menuitemradio]):is(:hover,:focus-visible),.menu-link:hover,.menu-link:focus-visible,
.select-option:hover,.select-option.is-focused,.people-combobox-option:hover,.people-combobox-option.is-active{outline:0;background:var(--plate-hover)}
/* Keyboard focus in a menu or list is a 2 px ink ring inside the item (≥ 3:1, §11.2); the fill alone is hover. */
.control-menu :is([role=menuitem],[role=menuitemradio]):focus-visible,.menu-link:focus-visible,
.select-option.is-focused,.people-combobox-option.is-active{box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
.control-menu :is([role=menuitem],[role=menuitemradio]):disabled,.select-option:disabled{color:var(--disabled);cursor:default;background:transparent}
/* Radio items: one choice of several. The check marks the current one. */
.control-menu [role=menuitemradio]>.br-icon{visibility:hidden;color:var(--ink)}
.control-menu [role=menuitemradio][aria-checked=true]{font-weight:var(--weight-medium)}
.control-menu [role=menuitemradio][aria-checked=true]>.br-icon{visibility:visible}
.control-menu .is-destructive,.control-menu .is-destructive>.br-icon{color:var(--ink-alert)}
.control-menu>hr,.menu-separator{height:0;margin:var(--space-2) var(--space-3);border:0;border-top:1px solid var(--line-soft)}
.menu-label{
  padding:var(--space-3) var(--space-3) var(--space-1);font:var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Switcher destinations (the header breadcrumb's menus): a name with a quiet hint, a count on the right and a
   check on the current one. The check keeps its slot, so counts line up whichever item is current. */
.control-menu .menu-destination>.br-icon:last-child{visibility:hidden;color:var(--ink)}
.control-menu .menu-destination[aria-current]{font-weight:var(--weight-medium)}
.control-menu .menu-destination[aria-current]>.br-icon:last-child{visibility:visible}
.control-menu .menu-destination[aria-current]>span>small{font-weight:var(--weight-regular)}
.control-menu .menu-destination .menu-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.control-menu .menu-destination .menu-name.is-ticking{text-overflow:clip;animation:menu-ticker var(--ticker-duration,4s) ease-in-out .3s infinite alternate}
@keyframes menu-ticker{0%,10%{text-indent:0}90%,100%{text-indent:var(--ticker-shift,0)}}
.control-menu .menu-destination>.menu-indent{flex:0 0 var(--icon-size)}
.control-menu .menu-destination>.menu-count{flex:0 0 auto;min-width:var(--space-5);padding:0 6px;border-radius:var(--radius-full);background:var(--element);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--space-5);color:var(--subtle);text-align:center;font-variant-numeric:tabular-nums}
dialog .control-menu [role=menuitem]{min-height:calc(var(--icon-target) + var(--space-1));font-size:var(--text-m)}

/* Select menu: 16 px rows in forms, 14 px rows from toolbars; the chosen option carries a check. */
.select-option{justify-content:space-between;min-height:calc(var(--icon-target) + var(--space-1));font-size:var(--text-m)}
.select-option>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-option>.br-icon{visibility:hidden;color:var(--ink)}
.select-option[aria-selected=true]{font-weight:var(--weight-medium)}
.select-option[aria-selected=true]>.br-icon{visibility:visible}
.select-menu.is-toolbar .select-option{min-height:var(--icon-target);font-size:var(--text-s)}

.people-combobox-option{min-height:calc(var(--icon-target) + var(--space-1));font-size:var(--text-m)}
.people-combobox-empty{padding:var(--space-3) var(--space-3);font-size:var(--text-s);line-height:var(--leading-normal);color:var(--muted)}

/* Contact popover: who this is, how to reach them, where to edit. */
.contact-popover{display:grid;gap:var(--space-4);width:min(320px,100vw - var(--space-6));padding:var(--space-5)}
.contact-popover-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0}
.contact-popover-person{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.contact-popover-identity{display:grid;gap:2px;min-width:0;flex:1 1 auto}
.contact-popover-identity>strong{font-size:var(--text-m);font-weight:var(--weight-medium);line-height:var(--leading-tight);overflow-wrap:anywhere}
.contact-popover-identity>span{font-size:var(--text-s);color:var(--muted)}
.contact-popover-links{display:grid;margin:0 calc(var(--space-3) * -1)}
.contact-popover>.text-button{justify-self:start}

/* Tooltip. Placed by controls.js; help tooltips stay open while hovered. */
.control-tooltip{
  position:fixed;z-index:var(--z-toast);max-width:min(280px,100vw - var(--space-4));padding:var(--space-2) var(--space-3);border-radius:var(--radius-s);
  background:var(--tip);color:var(--tip-ink);font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-normal);
  text-align:left;white-space:pre-line;box-shadow:var(--shadow-float);pointer-events:auto;
}
/* Callout: a tooltip with structure (the Overview path's stage callouts, overview.css lays out what is inside).
   The same ink plate, wider and roomier, with a caret pointing at its trigger's node (--callout-caret). */
.control-callout{width:min(304px,100vw - var(--space-4));max-width:none;padding:var(--space-4) var(--space-4) var(--space-3);border-radius:var(--radius-m);white-space:normal;line-height:var(--leading-snug)}
.control-callout::after{content:'';position:absolute;top:100%;left:var(--callout-caret,var(--space-6));width:var(--space-3);height:var(--space-3);margin:calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2);border-radius:0 0 var(--radius-xs) 0;background:var(--tip);transform:rotate(45deg)}
.control-callout[data-below]::after{top:0;border-radius:var(--radius-xs) 0 0 0}

/* Toast. Bottom centre, above everything in the document. */
#toast{
  position:fixed;left:50%;bottom:var(--space-6);z-index:var(--z-toast);max-width:min(480px,100vw - var(--space-8));
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-m);background:var(--tip);color:var(--tip-ink);
  font-size:var(--text-s);line-height:var(--leading-snug);text-align:center;opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,var(--space-2));
  transition:opacity var(--motion-enter) var(--ease-rise),transform var(--motion-enter) var(--ease-rise),visibility 0s linear var(--motion-enter);
}
#toast.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}

/* Dialogs -------------------------------------------------------------------- */
dialog{
  position:fixed;inset:0;margin:auto;width:min(560px,100vw - var(--space-8));max-width:100vw;max-height:min(90dvh,100dvh - var(--space-8));
  --page:var(--float);padding:0;border:0;border-radius:var(--radius-l);background:var(--page);color:var(--ink);box-shadow:none;overflow:hidden;
}
dialog[open]{display:flex;flex-direction:column;animation:rise-in var(--motion-enter) var(--ease-rise)}
dialog[open]::backdrop{animation:fade-in var(--motion-enter) var(--ease-rise)}
dialog::backdrop{background:var(--overlay)}
dialog.is-wide{width:min(760px,100vw - var(--space-8))}
html:has(dialog:modal){overflow:hidden}
dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-shrink:0;padding:var(--space-8) var(--space-8) var(--space-2)}
/* Dialog titles are Section 20/600 (§6.2 type ladder), as kit.dialog's. */
dialog>header h2{
  flex:1 1 auto;min-width:0;padding-top:calc((var(--icon-target) - var(--text-l) * var(--leading-heading)) / 2);
  font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-title);overflow-wrap:anywhere;
}
dialog>header>.compact-icon{margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0}
.dialog-body{flex:1 1 auto;min-height:0;padding:var(--space-2) var(--space-8) var(--space-8);overflow-y:auto;overscroll-behavior:contain;font-size:var(--text-m);line-height:var(--leading-normal);color:var(--ink)}
:where(.dialog-body) :where(p,ul,ol,dl){margin:0 0 var(--space-4)}
:where(.dialog-body)>:last-child{margin-bottom:0}
:where(.dialog-body) h3{margin:var(--space-6) 0 var(--space-3);font-size:var(--text-l);font-weight:var(--weight-medium);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
:where(.dialog-body)>h3:first-child{margin-top:0}
.dialog-intro{color:var(--muted)}
dialog>footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-3);flex-shrink:0;padding:var(--space-5) var(--space-8);border-top:1px solid var(--line-soft);background:var(--page)}
dialog>footer>.form-note{margin-right:auto}
/* Footer buttons are Button 14/500 (§6.2), as kit.dialog's. */
dialog>footer>:is(.primary,.secondary,.tertiary,.text-button){font-size:var(--text-s)}

/* Side sheet: right edge, full height, radius on the leading edge. */
dialog.sheet{inset:0 0 0 auto;margin:0;width:min(520px,100vw);height:100dvh;max-height:100dvh;border-radius:var(--radius-l) 0 0 var(--radius-l)}
dialog.sheet[open]{animation:slide-in var(--motion-enter) var(--ease-rise)}
dialog.sheet>header{padding:var(--space-6) var(--space-8) var(--space-2)}
dialog.sheet>header h2{padding-top:calc((var(--icon-target) - var(--text-l) * var(--leading-tight)) / 2);font-size:var(--text-l);font-weight:var(--weight-medium);letter-spacing:0}
dialog.sheet>.dialog-body>h2{margin:var(--space-2) 0 var(--space-4);font-size:var(--text-3xl);font-weight:var(--weight-semibold);line-height:var(--leading-tightest);letter-spacing:var(--tracking-title);overflow-wrap:anywhere}

/* Surfaces and structure ----------------------------------------------------- */
.plate{padding:var(--space-6);border:0;border-radius:var(--radius-l);background:var(--plate);color:var(--ink)}
.plate.is-interactive{cursor:pointer;transition:background-color var(--motion-fast)}
.plate.is-interactive:hover,.plate.is-interactive:focus-within{background:var(--plate-hover)}
button.plate,a.plate{display:block;width:100%;text-align:left;text-decoration:none}
/* Media tile: blackroll.com's frame for product shots and illustrations, a clipped 20 px tile on the warm
   gradient (editorial images use 12 px), and its label, Söhne Mono on a blurred dark pill, pinned top left. */
.media-tile{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-l);background:var(--media-gradient),var(--media);color:var(--ink)}
.media-tile.is-editorial{border-radius:var(--radius-m)}
/* Night: the AI Lab's dark card, where Roger AI is shown. */
.media-tile.is-night{background:var(--media-night-gradient),var(--media-night);color:var(--night-text)}
.media-label{
  position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;display:inline-flex;align-items:center;max-width:calc(100% - var(--space-6));
  height:var(--label-height);padding:0 var(--space-2);border-radius:var(--radius-full);background:var(--media-label);color:var(--media-label-ink);
  font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);pointer-events:none;
}
@media(min-width:768px){.media-label{top:var(--space-4);left:var(--space-4)}}

/* At a glance: a strip of tiles, each a label, one short value and a quiet note. Interactive tiles
   are links (the button covers the tile; a chip in the value stays above it). */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-2);min-width:0}
.glance-item{position:relative;display:grid;align-content:start;gap:var(--space-1);min-width:0;min-height:96px;padding:var(--space-4);border-radius:var(--radius-l);background:var(--plate);transition:background-color var(--motion-fast)}
.glance-item.is-interactive:hover,.glance-item.is-interactive:focus-within{background:var(--plate-hover)}
.glance-label{display:flex;align-items:center;gap:var(--space-2);min-width:0;font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glance-value{display:flex;align-items:center;gap:var(--space-2);min-width:0;font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.glance-value.is-text,.glance-item.is-text .glance-value{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:0}
.glance-value .is-muted{color:var(--muted);font-weight:var(--weight-regular)}
/* A person in a tile reads as the value: avatar and name on up to two lines, still the contact menu. */
.glance-value>.chip{position:relative;z-index:1;align-items:flex-start;max-width:100%;height:auto;min-height:0;margin:0 0 0 calc(var(--space-1) * -1);padding:var(--space-1);border-radius:var(--radius-m);background:transparent;font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:0;text-align:left}
.glance-value>.chip:hover{background:var(--plate-hover)}
.glance-value>.chip>.chip-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.glance-value>.chip>.avatar{margin-top:-2px}
.glance-value>.chip>.br-icon:last-child{display:none}
.glance-value>.chip.is-empty{align-items:center;padding-right:var(--space-2);box-shadow:none;color:var(--subtle)}
.glance-value>.chip.is-empty>.chip-name{display:block;white-space:nowrap}
.glance-value>.chip.is-empty:hover{color:var(--ink)}
.glance-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;overflow:hidden;font-size:var(--text-xs);line-height:var(--leading-snug);color:var(--muted)}
.glance-link{position:absolute;inset:0;border-radius:var(--radius-l)}
.glance-link:focus-visible{outline-offset:-2px}

/* Fact list: labels in one left column, values beside them, hairlines between rows. The label
   column gives the eye one straight edge to scan; values are 14 px body. */
.fact-list{display:grid;min-width:0;margin:0;border:1px solid var(--line-panel);border-radius:var(--radius-l)}
.fact-row{position:relative;display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;gap:var(--space-2) var(--space-6);align-items:start;padding:var(--space-4) var(--space-5)}
.fact-row+.fact-row{border-top:1px solid var(--line-soft)}
.fact-row>dt{padding-top:2px;font-size:var(--text-s);font-weight:var(--weight-semibold);line-height:var(--leading-snug);color:var(--ink)}
.fact-row>dd{display:grid;gap:var(--space-3);min-width:0;margin:0;font-size:var(--text-s);line-height:var(--leading-normal);color:var(--ink);overflow-wrap:anywhere}
.fact-tools{display:flex;align-items:center;margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0}

.row-list{display:grid;min-width:0}
.row{display:grid;align-items:center;gap:var(--space-4);min-width:0;padding:var(--space-5) 0;border-bottom:1px solid var(--line-soft)}
.row-list>.row:last-child{border-bottom:0}

/* Section header: sentence-case title, quiet count, tools on the right. */
/* Wayfinding level 2 (design-system §3): a section title is clearly bigger and heavier than the rows
   under it, so a page reads as a few labelled blocks. The count is a small pill beside it. A level-3
   header names a group inside a section. */
.section-header{display:flex;align-items:center;gap:var(--space-3);min-width:0;min-height:var(--control-sm);margin:0 0 var(--space-3)}
.section-header>:is(h2,h3){margin:0;min-width:0;font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.section-header>h3{font-size:var(--text-s);letter-spacing:0}
.section-count{display:inline-block;flex:0 1000 auto;min-width:0;height:22px;padding:0 var(--space-2);border-radius:var(--radius-full);background:var(--element);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:22px;color:var(--subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.section-count.is-text{height:auto;padding:0;border-radius:0;background:transparent;font-size:var(--text-s);font-weight:var(--weight-regular);line-height:var(--leading-snug);color:var(--muted)}
.section-tools{display:flex;flex:0 0 auto;align-items:center;gap:var(--space-1);margin-left:auto}

/* Record rows: one title line and one quiet meta line. The title button's hit area
   covers the row, so the whole row opens the record; aside and actions sit above it.
   Actions appear on hover or focus, and always on touch screens. */
.record-list{display:grid;min-width:0;border:1px solid var(--line-panel);border-radius:var(--radius-l);background:var(--page);overflow:hidden}
.record-row{
  position:relative;display:grid;grid-template-columns:var(--space-2) minmax(0,1fr) auto auto;align-items:center;gap:var(--space-4);
  min-height:56px;padding:var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  transition:background-color var(--motion-fast);
}
.record-row+.record-row{border-top:1px solid var(--line-soft)}
.record-row:hover,.record-row:focus-within{background:var(--plate)}
/* The dot sits above the row's hit area so its label shows on hover. */
.record-row>.status-dot{position:relative;z-index:1}
.record-main{display:grid;gap:2px;min-width:0}
.record-title{margin:0;min-width:0;font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:0}
.record-title>button{display:block;max-width:100%;overflow:hidden;color:inherit;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.record-title>button::after{content:'';position:absolute;inset:0}
.record-title>button:focus-visible{outline:0}
.record-title>button:focus-visible::after{outline:var(--focus-width) solid var(--focus-ring);outline-offset:-2px}
.record-meta{display:flex;align-items:center;gap:0 var(--space-2);min-width:0;margin:0;overflow:hidden;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted);white-space:nowrap}
/* Status words and dates keep their width; only the free text at the end truncates. */
.record-meta>span{flex:0 0 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.record-meta>span:last-child{flex-shrink:1}
.record-meta>span+span::before{content:'';display:inline-block;width:3px;height:3px;margin:0 var(--space-2) 0 0;border-radius:var(--radius-full);background:currentColor;opacity:.6;vertical-align:middle}
.record-meta .is-alert{color:var(--ink-alert)}
.record-meta .is-strong{color:var(--ink)}
.record-aside{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);min-width:0}
.record-aside>.chip{max-width:220px}
/* A read-only person in a row is just the avatar; the name is in the tooltip and for screen readers. */
.record-aside>span.chip.is-compact{width:auto;min-height:0;background:transparent}
.record-aside>span.chip.is-compact.is-empty{box-shadow:none}
.record-actions{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-1);opacity:0;transition:opacity var(--motion-fast)}
.record-row:hover>.record-actions,.record-row:focus-within>.record-actions{opacity:1}
.record-row.is-muted .record-title{color:var(--muted)}
@media(hover:none){.record-actions{opacity:1}}
/* Narrow screens: the step always shows, on its own line, so it stays visible and in the tab order. */
@media(max-width:700px){
  .record-row{grid-template-columns:var(--space-2) minmax(0,1fr) auto;gap:var(--space-3)}
  .record-row>.record-aside{grid-row:1;grid-column:3}
  .record-row>.record-actions{grid-row:2;grid-column:2 / -1;justify-self:start;margin-top:calc(var(--space-1) * -1);opacity:1}
  /* Titles get two lines on a phone rather than a clipped sentence. */
  .record-title>button{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
  .record-row{padding-inline:var(--space-4) var(--space-3)}
  .record-aside>.chip:not(.is-compact){width:var(--control-sm);padding:0;justify-content:center}
  /* Chips shrink to the avatar or icon; the name stays for screen readers. */
  .record-aside>.chip:not(.is-compact)>:not(.avatar,.br-icon:first-child){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* The page name lives in the breadcrumb and sidebar. This invisible space keeps
   the reading area calm after removing the repeated title/action bar. */
.workspace-page-spacer{height:var(--space-4);flex:0 0 var(--space-4)}
/* Legacy page-bar primitives remain for older standalone screens and toolbars. */
.workspace-pagebar{
  position:sticky;top:0;z-index:var(--z-sticky);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  min-height:var(--pagebar-height);padding:var(--space-2) var(--gutter);background:var(--page);border-bottom:1px solid var(--line-soft);
}
.pagebar-title{flex:1 1 200px;display:grid;gap:2px;min-width:0}
.pagebar-title>h1,.workspace-pagebar>h1{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-icon{display:grid;flex:0 0 auto;place-items:center;width:var(--icon-target);height:var(--icon-target);border-radius:var(--radius-m);background:var(--ink);color:var(--page)}
.page-description{margin:0;font-size:var(--text-s);line-height:var(--leading-snug);color:var(--muted)}

/* Page intro: eyebrow, title and description for reading and admin pages. */
.page-intro{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-6);margin:0 0 var(--space-8)}
.page-intro-copy{display:grid;gap:var(--space-3);min-width:0;flex:1 1 320px}
.page-intro h1{font-size:var(--text-2xl);font-weight:var(--weight-semibold);line-height:var(--leading-tightest);letter-spacing:var(--tracking-title);overflow-wrap:anywhere}
.page-intro .page-description{max-width:60ch;font-size:var(--text-m);line-height:var(--leading-normal)}
.page-intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);flex:0 0 auto;padding-top:var(--space-1)}

/* Generic toolbar that feature toolbars compose: 36 px controls on a hairline. */
.toolbar{display:flex;align-items:center;gap:var(--space-2);min-height:var(--pagebar-height);padding:var(--space-2) var(--gutter);background:var(--page);border-bottom:1px solid var(--line-soft)}
.toolbar>:is(h1,h2){flex:1 1 auto;min-width:0;margin:0;font-size:var(--text-l);font-weight:var(--weight-medium);line-height:var(--leading-tight);letter-spacing:var(--tracking-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolbar :is(.primary,.secondary,.tertiary){min-height:var(--control-sm);padding:0 var(--space-4);font-size:var(--text-s)}
.toolbar :is(.primary,.secondary,.tertiary):has(>.br-icon:only-child){width:var(--control-sm)}
.toolbar .compact-icon{width:var(--icon-target-sm);height:var(--icon-target-sm)}

/* Empty state: a plate with one next step. */
.empty-state{display:grid;justify-items:start;gap:var(--space-3);padding:var(--space-8)}
.empty-state-icon{display:grid;place-items:center;width:var(--icon-target);height:var(--icon-target);border-radius:var(--radius-m);background:var(--page);color:var(--ink)}
.empty-state h3{font-size:var(--text-l);font-weight:var(--weight-medium);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
.empty-state p{max-width:52ch;margin:0;font-size:var(--text-m);line-height:var(--leading-normal);color:var(--muted)}
.empty-state-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}

/* Disclosure: a 40 px summary row with a chevron that turns when open. */
.disclosure{min-width:0}
.disclosure>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--icon-target);padding:0 var(--space-2) 0 var(--space-1);border-radius:var(--radius-s);font-size:var(--text-m);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--ink);cursor:pointer;transition:background-color var(--motion-fast)}
.disclosure>summary:hover{background:var(--element)}
.disclosure>summary>.br-icon:first-child{color:var(--muted);transition:transform var(--motion-fast)}
.disclosure[open]>summary>.br-icon:first-child{transform:rotate(180deg)}
.disclosure-title{flex:1 1 auto;min-width:0}
.disclosure>summary>small{font-size:var(--text-xs);color:var(--muted)}
.disclosure-body{padding:var(--space-2) 0 var(--space-4)}

/* Dialog content: the planning guide steps. */

/* Mobile ----------------------------------------------------------------------- */
@media(max-width:700px){
  dialog{inset:auto 0 0;margin:0;width:100vw;max-width:100vw;max-height:calc(100dvh - var(--space-6));border-radius:var(--radius-l) var(--radius-l) 0 0}
  dialog.is-wide{width:100vw}
  dialog>header{padding:var(--space-6) var(--space-6) var(--space-2)}
  .dialog-body{padding:var(--space-2) var(--space-6) var(--space-6)}
  dialog>footer{padding:var(--space-4) var(--space-6)}
  dialog.sheet{inset:auto 0 0;width:100vw;height:auto;max-height:calc(100dvh - var(--space-6));border-radius:var(--radius-l) var(--radius-l) 0 0}
  dialog.sheet[open]{animation-name:rise-in}
  dialog.sheet>header{padding:var(--space-5) var(--space-6) var(--space-2)}
  dialog.sheet>.dialog-body>h2{font-size:var(--text-2xl)}
  .workspace-pagebar{padding-inline:var(--gutter-mobile)}
  .page-icon{display:none}
  .pagebar-title>h1,.workspace-pagebar>h1{font-size:var(--text-l)}
  .fact-row{grid-template-columns:minmax(0,1fr) auto;padding:var(--space-4)}
  .fact-row>dd{grid-column:1 / -1}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Page bars keep the title beside the actions; actions with an icon show only the icon (the label stays
     for screen readers). Actions that still do not fit wrap under the title rather than overflow. */
  .pagebar-title{flex:1 1 0}
  /* A person chip in a page bar shrinks to its avatar or icon (and status dot); its label stays for screen readers. */
  
  .toolbar{flex-wrap:wrap;padding-inline:var(--gutter-mobile)}
  .toolbar>:is(h1,h2){flex-basis:100%}
  .page-intro{margin-bottom:var(--space-6)}
  .page-intro h1{font-size:var(--text-xl)}
  .contact-popover{width:min(320px,100vw - var(--space-6))}
  #toast{bottom:var(--space-4)}
}
@media(max-width:600px){
  .field-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
}

/* Dialog copy and generic row cells shared by every feature. */

.dialog-quote{margin:var(--space-3) 0;padding:var(--space-3) var(--space-4);border-left:2px solid var(--line);border-radius:0 var(--radius-s) var(--radius-s) 0;background:var(--plate);font-size:var(--text-m);line-height:var(--leading-normal);color:var(--ink)}
.row-main{display:grid;gap:var(--space-1);min-width:0}
.row-main>small{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}

/* Reading pages name themselves on small screens, where the header shows only the project. */
@media(max-width:700px){
  .workspace-page-title.sr-only{position:static;width:auto;height:auto;margin:var(--space-6) var(--gutter-mobile) 0;padding:0;overflow:visible;clip:auto;white-space:normal;font-size:var(--text-l);line-height:var(--leading-tight);overflow-wrap:anywhere}
  .workspace-page-title+.workspace-page-spacer{display:none}
  .section-header{flex-wrap:wrap;row-gap:var(--space-2)}
  .section-tools{flex-wrap:wrap;max-width:100%}
}
.form-stack{display:grid;gap:var(--space-5);min-width:0}
.form-stack>.field+.field{margin-top:0}
.form-stack>:is(.primary,.secondary,.tertiary,.text-button){justify-self:start}

/* Roger in a field (roger-suggest.js attachFieldAssist): the Roger mark sits inside the open field, bottom right,
   and drafts it; ‹ 1 of 3 › steps through the options beside it. The control follows the input inside kit.field
   and shares its grid cell (those rules sit with kit.field in the Kit section); a short note shows under the field
   when Roger is drafting or working from too little. */
.roger-draft{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-1);align-self:end;justify-self:end;margin:var(--space-1)}
.roger-draft-note{margin:0;color:var(--subtle);font:var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-brand)}
.roger-draft-note[hidden]{display:none}
.field-assist[data-limited] .roger-draft-note{color:var(--ink-attention-text)}
.field-assist[data-state=error] .roger-draft-note{color:var(--ink-alert-text)}
.field-assist[data-state=loading] .roger-draft-note{animation:roger-suggest-pulse 1.2s var(--ease-glide) infinite alternate}
.roger-draft-nav{display:inline-flex;align-items:center;gap:var(--space-1)}
.roger-draft-nav[hidden]{display:none}
.roger-draft-arrow,.roger-draft-btn{display:inline-grid;place-items:center;flex:0 0 auto;margin:0;padding:0;border:0;border-radius:var(--radius-full);background:transparent;color:var(--muted);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-rise),color var(--motion-fast) var(--ease-rise)}
.roger-draft-arrow{width:var(--control-sm);height:var(--control-sm)}
.roger-draft-arrow .br-icon{width:var(--icon-size-s);height:var(--icon-size-s)}
.roger-draft-btn{width:var(--icon-target);height:var(--icon-target)}
:is(.roger-draft-arrow,.roger-draft-btn):hover{background:var(--plate-hover);color:var(--ink)}
.roger-draft-count{min-width:6ch;color:var(--muted);font:var(--weight-regular) var(--text-xs)/1 var(--font-brand);font-variant-numeric:tabular-nums;text-align:center}
.field-assist[data-state=loading] .roger-draft-btn{cursor:progress}
.field-assist[data-state=loading] .roger-draft-btn>*{animation:roger-suggest-pulse .6s var(--ease-glide) infinite alternate}
@keyframes roger-suggest-pulse{from{opacity:.45}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.field-assist[data-state=loading] :is(.roger-draft-note,.roger-draft-btn>*){animation:none}}


/* The people picker (person-picker.js): filter, one-click people (most likely first), Invite new user last */
.person-pick{display:grid;gap:var(--space-1);min-width:min(320px,100vw - var(--space-6))}
.person-pick-search{display:flex;align-items:center;gap:var(--space-2);height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--radius-s);background:var(--plate);color:var(--muted)}
.person-pick-search .br-icon{width:var(--icon-size-s);height:var(--icon-size-s)}
.person-pick-input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:var(--weight-regular) var(--text-s)/1 var(--font-brand);outline:0}
.person-pick-search:focus-within{box-shadow:var(--focus-field)}
.person-pick-list{display:grid;max-height:min(360px,60vh);overflow:auto}
.person-pick-row{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--icon-target);margin:0;padding:var(--space-1) var(--space-2);border:0;border-radius:var(--radius-s);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.person-pick-row[hidden]{display:none}
/* The project menu's "Find a project" (shell-chrome.js projectMenu): the picker's search, held at the top while the
   long list scrolls under it. */
.menu-filter{position:sticky;top:calc(var(--space-2) * -1);z-index:1;margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0;padding:var(--space-2);background:var(--page)}
.menu-filter-field{display:flex;align-items:center;gap:var(--space-2);height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--radius-s);background:var(--plate);color:var(--muted)}
.menu-filter-field .br-icon{width:var(--icon-size-s);height:var(--icon-size-s)}
.menu-filter-input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:var(--weight-regular) var(--text-s)/1 var(--font-brand);outline:0}
.menu-filter-field:focus-within{box-shadow:var(--focus-field)}
.menu-filter-input::-webkit-search-decoration,.menu-filter-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.person-pick-row:is(:hover,:focus-visible){background:var(--plate-hover)}
.person-pick-main{display:grid;flex:1;min-width:0}
/* In a control menu its rows are menuitems: the avatar (kit person, by its size) and the + keep their size. */
.control-menu .person-pick-row>:is(span[data-size],.person-pick-add){display:inline-grid;flex:0 0 auto;gap:0}
.control-menu .person-pick{min-width:0}
.person-pick-name{font:var(--weight-regular) var(--text-s)/var(--leading-snug) var(--font-brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-pick-me{color:var(--muted)}
.person-pick-meta{color:var(--muted);font:var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-pick-check{color:var(--ink)}
.person-pick-empty{margin:0;padding:var(--space-2);color:var(--muted);font:var(--weight-regular) var(--text-xs)/1 var(--font-brand)}
.person-pick-invite{border-top:var(--stroke) solid var(--line-soft);border-radius:0 0 var(--radius-s) var(--radius-s);margin-top:var(--space-1);padding-top:var(--space-2)}
.person-pick-add{display:grid;place-items:center;flex:0 0 auto;width:calc(var(--space-6) + var(--space-1));height:calc(var(--space-6) + var(--space-1));border-radius:var(--radius-full);background:var(--plate);color:var(--ink)}
.person-pick-add .br-icon{width:var(--icon-size-xs);height:var(--icon-size-xs)}
.person-pick-error{margin:0;color:var(--ink-alert);font:var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-brand)}
.person-pick-invite-form{display:grid;gap:var(--space-3);padding:var(--space-2)}


/* =====================================================================================================
   Kit · the 22 primitives of the experience blueprint (§6.7, §6.8), rendered by src/kit.js.
   Every class starts with k- and modifiers are data attributes; nothing below restyles a class from the
   sections above (legacy views keep those until Phase 3). The one shared token is .primary on the kit's
   primary button, the contract tests/dom-contracts.test.mjs counts; .k-btn rules outrank the legacy
   .primary rules on purpose. Roles and steps come from foundations.css. Three surfaces, never nested:
   .k-outline (collections), .k-plate (one grouped object), .k-tile (the page's poster); plus .k-float.
   Breakpoints: 700 (phone), 1100 (sidebar), 1440. Motion: tokens only, transform and opacity (plus
   box-shadow for rings and fills on hover); the global reduced-motion rule in foundations.css applies.
   ===================================================================================================== */

/* Type ladder (§6.2): six styles and the mono label treatment */
.k-t-display{margin:0;font-size:var(--text-3xl);font-weight:var(--weight-semibold);line-height:var(--leading-poster);letter-spacing:var(--tracking-poster);overflow-wrap:anywhere}
.k-t-page{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
.k-t-section{margin:0;font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-title)}
.k-t-lead{margin:0;font-size:var(--text-m);font-weight:var(--weight-regular);line-height:var(--leading-normal);letter-spacing:0}
.k-t-body{margin:0;font-size:var(--text-s);font-weight:var(--weight-regular);line-height:var(--leading-normal);letter-spacing:0}
.k-t-strong{margin:0;font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:0}
.k-t-meta{margin:0;font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-normal);letter-spacing:0;color:var(--muted)}
.k-t-mono{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
:is(.k-t-display,.k-t-page,.k-t-section,.k-t-lead,.k-t-body,.k-t-meta) :is(b,strong){font-weight:var(--weight-medium)}

/* Surfaces */
.k-outline,.k-list{border:1px solid var(--line);border-radius:var(--radius-l);background:var(--page);overflow:hidden}
.k-plate{padding:var(--space-5) var(--space-6);border-radius:var(--radius-l);background:var(--plate);color:var(--ink)}
.k-float{--page:var(--float);padding:var(--space-2);border-radius:var(--radius-l);background:var(--page);color:var(--ink);box-shadow:var(--shadow-float)}
.k-tile{--k-pad-x:var(--space-10);position:relative;isolation:isolate;overflow:hidden;padding:var(--space-8) var(--k-pad-x);border-radius:var(--radius-l);background:var(--media-gradient),var(--media);color:var(--ink)}
.k-tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);min-width:0}
.k-tile-label{display:inline-flex;align-items:center;flex:0 1 auto;height:var(--label-height);min-width:0;padding:0 var(--space-3);border-radius:var(--radius-full);background:var(--media-label);color:var(--media-label-ink);font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
.k-tile-label[data-plain]{font-family:var(--font-brand);letter-spacing:0;text-transform:none}
.k-tile-aside{flex:0 0 auto;margin-left:auto;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted);text-align:right}
.k-tile-aside :is(.k-t-display,.k-t-page,.k-t-section,.k-t-strong,.k-t-body){color:var(--ink)}
.k-tile>.k-path[data-size=hero]{margin-top:calc(var(--space-10) + var(--space-1))}
.k-tile .k-facts{margin-top:var(--space-5)}

/* Page rhythm (§6.5): page bar · 20 · hero · 20 · Next · 40 · sections 48 apart; chapters stack. A page without a bar
   starts at the region's top padding. */
.k-flow{min-width:0}
.k-flow>*+*{margin-top:var(--space-12)}
.k-flow>.k-page-header+*,.k-flow>.k-tile+.k-next,.k-flow>.k-path+.k-next{margin-top:var(--space-5)}
.k-flow>.k-page-header+.k-path[data-size=inline]{margin-top:var(--space-3)}
.k-flow>.k-page-header[data-bare]+*{margin-top:0}
.k-flow>.k-next+*{margin-top:var(--space-10)}
.k-flow>.k-section[data-chapter]+.k-section[data-chapter]{margin-top:0}

/* 1 Button */
.k-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);flex:0 0 auto;width:auto;min-width:0;height:var(--control);min-height:0;
  margin:0;padding:0 var(--space-5);border:0;border-radius:var(--radius-m);background:var(--element);color:var(--ink);
  font:var(--weight-medium) var(--text-s)/var(--leading-tight) var(--font-brand);letter-spacing:0;white-space:nowrap;text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-rise),color var(--motion-fast) var(--ease-rise),transform var(--motion-cursor) var(--ease-out);
}
/* Pressed, every button gives a little under the finger, then springs back. */
.k-btn:active:not(:disabled,[aria-disabled=true]){transform:scale(.97)}
.k-btn[data-size=s]{height:var(--control-sm);padding:0 var(--space-4)}
.k-btn>.br-icon{width:var(--icon-size-s);height:var(--icon-size-s)}
.k-btn-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.k-btn[data-variant=secondary]{background:var(--element);color:var(--ink)}
.k-btn[data-variant=secondary]:is(:hover,:active):not(:disabled,[aria-disabled=true]){background:var(--element-deep);color:var(--ink)}
:is(.k-plate,.k-next) .k-btn[data-variant=secondary]{background:var(--page)}
:is(.k-plate,.k-next) .k-btn[data-variant=secondary]:is(:hover,:active):not(:disabled,[aria-disabled=true]){background:var(--plate-hover)}
.k-btn.primary[data-variant=primary]{background:var(--accent);color:var(--accent-ink)}
.k-btn.primary[data-variant=primary]:is(:hover,:active):not(:disabled,[aria-disabled=true]){background:var(--accent-hover);color:var(--accent-hover-ink)}
.k-btn.primary[data-variant=primary]:is([data-stone],[data-k-stone] *){background:var(--page);color:var(--ink)}
.k-btn.primary[data-variant=primary]:is([data-stone],[data-k-stone] *):is(:hover,:active):not(:disabled){background:var(--plate-hover);color:var(--ink)}
/* Quiet: a button's words alone, in the text's own place (no padding in the layout). It answers as a button, not a
   link: under the pointer, the keyboard or its open menu a plate rises behind the words (::before, reaching past
   the box, so nothing moves), a step deeper while pressed. */
.k-btn[data-variant=quiet]{position:relative;isolation:isolate;height:auto;min-height:var(--icon-target-sm);padding:0;background:transparent;color:var(--ink)}
.k-btn[data-variant=quiet]::before{content:'';position:absolute;inset:calc(var(--space-1) / 2) calc(var(--space-2) * -1.25);z-index:-1;border-radius:var(--radius-s);background:var(--plate);opacity:0;transition:opacity var(--motion-fast) var(--ease-rise),background-color var(--motion-fast) var(--ease-rise)}
.k-btn[data-variant=quiet]:is(:hover,:active,:focus-visible,[aria-expanded=true][aria-haspopup]):not(:disabled,[aria-disabled=true]){background:transparent;color:var(--ink)}
.k-btn[data-variant=quiet]:is(:hover,:active,:focus-visible,[aria-expanded=true][aria-haspopup]):not(:disabled,[aria-disabled=true])::before{opacity:1}
.k-btn[data-variant=quiet]:active:not(:disabled,[aria-disabled=true])::before{background:var(--plate-hover)}
.k-btn[data-variant=quiet]:focus-visible{outline:0}
.k-btn[data-variant=quiet]:focus-visible::before{box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
:is(.k-plate,.k-next) .k-btn[data-variant=quiet]::before{background:var(--plate-hover)}
:is(.k-plate,.k-next) .k-btn[data-variant=quiet]:active:not(:disabled,[aria-disabled=true])::before{background:var(--plate-active)}
/* The legacy text button on a plate (a Next card, a plate in a record) steps its own plate down too. */
:is(.k-plate,.k-next) .text-button::before{background:var(--plate-hover)}
:is(.k-plate,.k-next) .text-button:active:not(:disabled)::before{background:var(--plate-active)}
.k-btn[aria-pressed=true]{background:var(--surface-selected);color:var(--page)}
.k-btn[data-destructive]:not([data-variant=quiet]){background:var(--tint-alert);color:var(--ink-alert-text)}
.k-btn[data-destructive]:not([data-variant=quiet]):is(:hover,:active):not(:disabled,[aria-disabled=true]){background:var(--ink-alert);color:var(--page)}
.k-btn[data-destructive][data-variant=quiet],.k-btn[data-destructive][data-variant=quiet]:is(:hover,:active,:focus-visible):not(:disabled,[aria-disabled=true]){color:var(--ink-alert)}
.k-btn[data-destructive][data-variant=quiet]::before{background:var(--tint-alert)}
.k-btn[data-destructive][data-variant=quiet]:active:not(:disabled,[aria-disabled=true])::before{background:color-mix(in srgb,var(--ink-alert) 16%,var(--tint-alert))}
.k-btn[data-variant]:is(:disabled,[aria-disabled=true]),.k-btn.primary[data-variant]:is(:disabled,[aria-disabled=true]){background:var(--element);color:var(--disabled);cursor:default}
.k-btn[data-variant=quiet]:is(:disabled,[aria-disabled=true]){background:transparent}
/* Suggestion: a way in beside a message box. Light at rest (hairline, muted label, icon at rest), full strength on hover. */
.k-btn[data-variant=suggestion]{padding:0 var(--space-3);border-radius:var(--radius-full);background:transparent;box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--muted);font-weight:var(--weight-regular);transition:background-color var(--motion-fast) var(--ease-rise),color var(--motion-fast) var(--ease-rise),box-shadow var(--motion-fast) var(--ease-rise),transform var(--motion-cursor) var(--ease-out)}
.k-btn[data-variant=suggestion]>.br-icon{opacity:var(--icon-rest);transition:opacity var(--motion-fast) var(--ease-rise)}
.k-btn[data-variant=suggestion]:is(:hover,:active,:focus-visible):not(:disabled,[aria-disabled=true]){background:var(--hover-wash);box-shadow:inset 0 0 0 1px var(--line-control);color:var(--ink)}
.k-btn[data-variant=suggestion]:is(:hover,:active,:focus-visible):not(:disabled,[aria-disabled=true])>.br-icon{opacity:1}
.k-btn[data-variant=suggestion]:is(:disabled,[aria-disabled=true]){background:transparent}

/* 2 IconButton */
.k-icon-btn{
  display:inline-grid;place-items:center;flex:0 0 auto;width:var(--icon-target);height:var(--icon-target);margin:0;padding:0;border:0;border-radius:var(--radius-m);
  background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-rise),color var(--motion-fast) var(--ease-rise),transform var(--motion-cursor) var(--ease-out);
}
.k-icon-btn:active:not(:disabled,[aria-disabled=true]){transform:scale(.94)}
.k-icon-btn[data-size=s]{width:var(--icon-target-sm);height:var(--icon-target-sm)}
.k-icon-btn[data-size=s]>.br-icon{width:var(--icon-size-s);height:var(--icon-size-s)}
.k-icon-btn>.br-icon{opacity:var(--icon-rest);transition:opacity var(--motion-fast) var(--ease-rise)}
.k-icon-btn:is(:hover,:focus-visible,[aria-expanded=true],[aria-pressed=true],:disabled,[aria-disabled=true])>.br-icon{opacity:1}
.k-icon-btn:is(:hover,[aria-expanded=true][aria-haspopup]):not(:disabled,[aria-pressed=true]){background:var(--plate)}
:is(.k-plate,.k-next) .k-icon-btn:hover:not(:disabled,[aria-pressed=true]){background:var(--plate-hover)}
.k-icon-btn:active:not(:disabled,[aria-disabled=true],[aria-pressed=true]){background:var(--plate-hover)}
:is(.k-plate,.k-next) .k-icon-btn:active:not(:disabled,[aria-disabled=true],[aria-pressed=true]){background:var(--plate-active)}
.k-icon-btn[aria-pressed=true]{background:var(--surface-selected);color:var(--page)}
.k-icon-btn:is(:disabled,[aria-disabled=true]){color:var(--disabled);background:transparent;cursor:default}

/* 3 Menu (also styles kit items inside controls.js's .control-menu) */
.k-menu{display:grid;min-width:var(--nav-width);max-width:min(320px,100vw - var(--space-6))}
:is(.k-menu,.control-menu) .k-menu-item{
  display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--icon-target);margin:0;padding:0 var(--space-3);border:0;border-radius:var(--radius-s);
  background:transparent;color:var(--ink);font:var(--weight-regular) var(--text-s)/var(--leading-snug) var(--font-brand);text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-rise);
}
:is(.k-menu,.control-menu) .k-menu-item:hover{background:var(--plate-hover)}
:is(.k-menu,.control-menu) .k-menu-item:focus-visible{outline:0;background:var(--plate-hover);box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
:is(.k-menu,.control-menu) .k-menu-item:is([aria-checked=true],[aria-current]:not([aria-current=false])){font-weight:var(--weight-medium)}
:is(.k-menu,.control-menu) .k-menu-item[data-destructive]{color:var(--ink-alert)}
:is(.k-menu,.control-menu) .k-menu-item:disabled{background:transparent;color:var(--disabled);cursor:default}
:is(.k-menu,.control-menu) .k-menu-item>:is(.k-menu-icon,.k-menu-check){display:inline-grid;place-items:center;flex:0 0 auto;min-width:0;color:var(--muted)}
:is(.k-menu,.control-menu) .k-menu-item>.k-menu-check{color:var(--ink)}
:is(.k-menu,.control-menu) .k-menu-item>.k-menu-label{display:grid;flex:1 1 auto;gap:2px;min-width:0;overflow-wrap:anywhere}
.k-menu-hint{font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-snug);color:var(--muted)}
.k-menu-sep{height:0;margin:var(--space-2) var(--space-3);border-top:1px solid var(--line-soft)}
.k-menu-group{padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-xs);line-height:var(--leading-snug);color:var(--muted)}

/* 4 Field: one field style everywhere (plate, 1 px line, 2 px ink focus) */
.k-field{display:grid;gap:var(--space-2);min-width:0;margin:0}
.k-field-label{display:block;margin:0;font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-normal);letter-spacing:0;color:var(--muted)}
.k-field-input{
  display:block;width:100%;min-width:0;height:var(--control);min-height:0;margin:0;padding:0 var(--space-4);border:0;border-radius:var(--radius-m);
  background:var(--plate);box-shadow:inset 0 0 0 1px var(--line-field);color:var(--ink);font:var(--weight-regular) var(--text-s)/var(--leading-normal) var(--font-brand);
  transition:box-shadow var(--motion-fast) var(--ease-rise);
}
textarea.k-field-input{height:auto;min-height:calc(var(--control) * 2);padding:var(--space-3) var(--space-4);resize:vertical}
.k-field-input:focus,.k-field-input:focus-visible{outline:0;border:0;box-shadow:var(--focus-field)}
.k-field-input[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--ink-alert)}
/* Roger in a field (roger-suggest.js attachFieldAssist): its control shares the input's grid cell, bottom right. */
.k-field>.field-assist{display:contents}
.k-field:has(>.field-assist)>.k-field-input,.field-assist>.roger-draft{grid-row:1;grid-column:1}
.k-field:has(>.k-field-label:not(.sr-only)):has(>.field-assist)>.k-field-input,.k-field:has(>.k-field-label:not(.sr-only))>.field-assist>.roger-draft{grid-row:2}
.k-field:has(>.field-assist)>input.k-field-input{padding-right:calc(var(--icon-target) + var(--space-2))}
.k-field:has(>.field-assist .roger-draft-nav:not([hidden]))>input.k-field-input{padding-right:calc(var(--icon-target) + var(--control-sm) * 2 + 6ch + var(--space-1) * 4)}
.k-field:has(>.field-assist)>textarea.k-field-input{padding-bottom:calc(var(--icon-target) + var(--space-1))}
.k-field-input[aria-invalid=true]:focus{box-shadow:inset 0 0 0 var(--focus-width) var(--ink-alert)}
.k-field-input:disabled{background:transparent;box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--disabled);cursor:default}
.k-field-input::placeholder{color:var(--muted);opacity:1}
.k-field[data-size=l] .k-field-input{height:var(--control-lg);padding:0 var(--space-4);font-size:var(--text-m)}
/* display: an editable at display size, edited in place (the Overview hero's name): the heading's own type, the
   height from the text. */
.k-field[data-size=display] .k-field-input{height:auto;padding:var(--space-2) var(--space-3);font:inherit;letter-spacing:inherit}
.k-field-note,.k-field-error{margin:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-field-error{color:var(--ink-alert)}

/* 5 EditableField (§7.1): plain at rest; the pencil button's hit area covers the field */
.k-editable{
  position:relative;display:block;margin:0 calc(var(--space-3) * -1);padding:var(--space-2) var(--space-10) var(--space-2) var(--space-3);border-radius:var(--radius-m);
  color:var(--ink);font-size:var(--text-s);font-weight:var(--weight-regular);line-height:var(--leading-normal);letter-spacing:0;
  transition:background-color var(--motion-fast) var(--ease-rise),box-shadow var(--motion-fast) var(--ease-rise);
}
.k-editable[data-size=lead]{font-size:var(--text-m);color:var(--muted)}
.k-editable[data-size=section]{font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-title)}
.k-editable[data-size=page]{font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
.k-editable[data-size=display]{font:inherit;letter-spacing:inherit}
.k-editable[data-size=strong]{font-weight:var(--weight-medium)}
.k-editable[data-size=meta]{font-size:var(--text-xs);color:var(--muted)}
.k-editable-value{display:block;overflow-wrap:anywhere}
.k-editable[data-multiline] .k-editable-value{white-space:pre-line}
/* Text Roger wrote that nobody has edited yet (ai-text.js): the slot's own colour turned a little toward mint. */
[data-roger-text]{color:var(--roger-text)}
.k-editable-source{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);letter-spacing:0;color:var(--muted)}
.k-editable:has(>.k-editable-source[data-inline])>.k-editable-value{display:inline}
.k-editable-source[data-inline]{display:inline;margin-left:var(--space-1);white-space:nowrap}
.k-editable-edit{position:static;display:block;width:0;height:0;margin:0;padding:0;border:0;background:none;color:var(--muted);cursor:pointer}
.k-editable-edit::after{content:'';position:absolute;inset:0;border-radius:inherit}
.k-editable-edit>.br-icon{position:absolute;top:var(--space-2);right:var(--space-3);width:var(--icon-size-s);height:var(--icon-size-s);opacity:0;transition:opacity var(--motion-fast) var(--ease-rise)}
.k-editable:is([data-size=page],[data-size=section],[data-size=display]) .k-editable-edit>.br-icon{top:50%;transform:translateY(-50%)}
.k-editable-edit:focus-visible{outline:0}
.k-editable:not([data-readonly]):is(:hover,:focus-within){background:var(--hover-wash);box-shadow:inset 0 0 0 1px var(--line)}
.k-editable:not([data-readonly]):has(.k-editable-edit:focus-visible){box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
.k-editable:is(:hover,:focus-within) .k-editable-edit>.br-icon{opacity:1}
.k-editable[data-readonly]{padding-right:var(--space-3)}
/* tone: the slot decides the value's colour (a muted lead, an ink lead); compact: an inline value (Due, "Sends
   people to") whose pencil sits inside its own width, so the next item is not pushed away. */
/* Words people wrote (a multi-line answer at body size) read in prose, a step back from the ink of titles and values. */
.k-editable[data-multiline][data-size=body]{color:var(--prose)}
.k-editable[data-tone=muted]{color:var(--muted)}
.k-editable[data-tone=ink]{color:var(--ink)}
.k-editable[data-compact]{display:inline-block;margin:0;padding:var(--space-1) var(--space-6) var(--space-1) var(--space-1)}
.k-editable[data-compact] .k-editable-edit>.br-icon{top:50%;right:var(--space-1);transform:translateY(-50%)}
.k-editable[data-align=end]{padding:var(--space-2) var(--space-3) var(--space-2) var(--space-10);text-align:right}
.k-editable[data-align=end][data-readonly]{padding-left:var(--space-3)}
/* clamp: a long value's first lines, then an ellipsis; the caller's Show more lifts it by drawing the value unclamped. */
.k-editable[data-clamp] .k-editable-value{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.k-editable[data-clamp="2"] .k-editable-value{-webkit-line-clamp:2;line-clamp:2}
.k-editable[data-clamp="3"] .k-editable-value{-webkit-line-clamp:3;line-clamp:3}
.k-editable[data-clamp="4"] .k-editable-value{-webkit-line-clamp:4;line-clamp:4}
.k-editable[data-align=end] .k-editable-edit>.br-icon{right:auto;left:var(--space-3)}
/* Fold: a long text at its first lines, its last line fading out, and a quiet Show more under it (kit.js toggleFold
   glides the text open; applyKitGeometry shows the toggle only when the text runs longer). */
.k-fold{display:block;min-width:0}
.k-fold-text{display:block;color:var(--prose);white-space:pre-line}
[data-fold="3"]{--k-fold-lines:3}
[data-fold="4"]{--k-fold-lines:4}
[data-fold="6"]{--k-fold-lines:6}
[data-fold] :is(.k-editable-value,.k-fold-text){overflow:hidden}
[data-fold][data-clipped] :is(.k-editable-value,.k-fold-text){max-height:calc(var(--k-fold-lines) * 1lh);mask-image:linear-gradient(to bottom,black calc(100% - 1lh),transparent)}
.k-fold-toggle{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--icon-target-sm);margin:calc(var(--space-1) * -1) 0 calc(var(--space-2) * -1);padding:0;border:0;background:none;color:var(--muted);font:var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-brand);letter-spacing:0;cursor:pointer;transition:color var(--motion-fast) var(--ease-rise)}
.k-fold-toggle:hover{color:var(--ink)}
.k-fold-toggle:focus-visible{outline-offset:0;border-radius:var(--radius-xs)}
.k-fold-toggle>.br-icon{width:var(--icon-size-xs);height:var(--icon-size-xs);transition:transform var(--motion-fast) var(--ease-rise)}
.k-fold-toggle[aria-expanded=true]>.br-icon{transform:rotate(180deg)}
.k-fold-toggle[aria-expanded=true] .k-fold-more,.k-fold-toggle[aria-expanded=false] .k-fold-less{display:none}
/* While the text is being edited (a Field in its place) the toggle steps aside. */
[data-fold]:has(.k-field)>.k-fold-toggle{display:none}
/* Touch: plain text at rest too (§7.1); a tap on the value edits it. */

/* The changed-here ring (§7.1, §8.2): set data-k-changed after a save or an applied change; it fades. */
[data-k-changed]{animation:k-changed var(--motion-ring) var(--ease-rise) both}
@keyframes k-changed{from{box-shadow:0 0 0 2px var(--page),0 0 0 4px var(--accent)}to{box-shadow:0 0 0 2px transparent,0 0 0 4px transparent}}

/* 6 Check */
.k-check{display:flex;align-items:flex-start;gap:var(--space-3);min-height:var(--control-sm);margin:0;padding:var(--space-2) 0;font-size:var(--text-s);font-weight:var(--weight-regular);line-height:var(--leading-snug);letter-spacing:0;color:var(--ink);cursor:pointer}
.k-check-input{
  appearance:none;-webkit-appearance:none;position:relative;display:grid;place-items:center;flex:0 0 auto;width:var(--check-size);height:var(--check-size);min-height:0;margin:0;padding:0;
  border:0;border-radius:var(--radius-xs);background:var(--page);box-shadow:inset 0 0 0 var(--stroke) var(--line-control);cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-rise),box-shadow var(--motion-fast) var(--ease-rise);
}
.k-check-input:checked{background:var(--surface-selected);box-shadow:none}
.k-check-input:checked::after{content:'';width:calc(var(--check-size) * .28);height:calc(var(--check-size) * .5);margin-top:calc(var(--check-size) * -.1);border:solid var(--page);border-width:0 2px 2px 0;transform:rotate(45deg)}
.k-check-input[type=radio]{border-radius:var(--radius-full)}
.k-check-input[type=radio]:checked::after{width:calc(var(--check-size) * .4);height:calc(var(--check-size) * .4);margin:0;border:0;border-radius:var(--radius-full);background:var(--page);transform:none}
/* Switch: a pill that fills mint as its white knob springs across (lands a pixel past and settles). Held down, the
   knob stretches toward where it will go, so the press reads before the release: a knob-white pill (::before)
   fades in under the knob and takes over its shadow, white on white, so no seam shows. */
.k-check:has(>.k-check-input[role=switch]){align-items:center}
.k-check-input[role=switch]{width:var(--switch-width);height:var(--switch-height);border-radius:var(--radius-full);background:var(--switch-off);box-shadow:none;transition:background-color var(--motion-enter) var(--ease-glide)}
.k-check-input[role=switch]::before,.k-check-input[role=switch]::after,.k-check-input[role=switch]:checked::after{
  content:'';position:absolute;top:2px;left:2px;width:var(--switch-knob-size);height:var(--switch-knob-size);margin:0;border:0;border-radius:var(--radius-full);
  background:var(--switch-knob);box-shadow:var(--switch-knob-shadow);transform:translateX(0);
  transition:transform var(--motion-enter) var(--ease-spring),box-shadow var(--motion-fast) var(--ease-rise),opacity var(--motion-fast) var(--ease-rise);
}
.k-check-input[role=switch]::before{width:calc(var(--switch-knob-size) + var(--switch-stretch));opacity:0}
.k-check-input[role=switch]:checked{background:var(--switch-on)}
.k-check-input[role=switch]:checked::after{transform:translateX(var(--switch-travel))}
.k-check-input[role=switch]:checked::before{transform:translateX(calc(var(--switch-travel) - var(--switch-stretch)))}
.k-check:hover>.k-check-input[role=switch]:not(:disabled){background:var(--switch-off-hover)}
.k-check:hover>.k-check-input[role=switch]:checked:not(:disabled){background:var(--switch-on-hover)}
.k-check:active>.k-check-input[role=switch]:not(:disabled)::before,.k-check-input[role=switch]:active:not(:disabled)::before{opacity:1}
.k-check:active>.k-check-input[role=switch]:not(:disabled)::after,.k-check-input[role=switch]:active:not(:disabled)::after{box-shadow:none}
.k-check-input[role=switch]:disabled{background:var(--switch-off);opacity:.45}
.k-check-input[role=switch]:disabled:checked{background:var(--switch-on)}
.k-check-input:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}
.k-check-input:disabled{background:var(--element);box-shadow:none;cursor:default}
.k-check:has(.k-check-input:disabled){color:var(--disabled);cursor:default}
.k-check-label{display:grid;gap:2px;min-width:0}
.k-check-note{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}

/* 7 Segmented, the toggle: a recessed track of equal segments and one raised thumb under the chosen option. The
   thumb glides (transform only) between segments; its position comes from data-at over data-count. The words sit
   above it; the chosen one in ink, the rest muted until hovered. */
.k-seg{position:relative;z-index:0;display:inline-grid;grid-auto-columns:minmax(max-content,1fr);grid-auto-flow:column;flex:0 0 auto;padding:var(--space-1);border-radius:var(--radius-m);background:var(--seg-track);box-shadow:inset 0 0 0 1px var(--seg-edge);vertical-align:middle}
.k-seg-thumb{position:absolute;z-index:-1;top:var(--space-1);bottom:var(--space-1);left:var(--space-1);width:calc((100% - var(--space-2)) / var(--k-seg-n,2));border-radius:var(--radius-s);background:var(--seg-thumb);box-shadow:var(--shadow-seg);transform:translateX(calc(100% * var(--k-seg-i,0)));transition:transform var(--motion-travel) var(--ease-glide),box-shadow var(--motion-fast) var(--ease-rise)}
.k-seg[data-count="2"]{--k-seg-n:2}.k-seg[data-count="3"]{--k-seg-n:3}.k-seg[data-count="4"]{--k-seg-n:4}.k-seg[data-count="5"]{--k-seg-n:5}.k-seg[data-count="6"]{--k-seg-n:6}
.k-seg[data-at="1"]{--k-seg-i:1}.k-seg[data-at="2"]{--k-seg-i:2}.k-seg[data-at="3"]{--k-seg-i:3}.k-seg[data-at="4"]{--k-seg-i:4}.k-seg[data-at="5"]{--k-seg-i:5}
.k-seg-option{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:calc(var(--control-sm) - var(--space-2));margin:0;padding:0 var(--space-4);border:0;border-radius:var(--radius-s);
  background:transparent;color:var(--muted);font:var(--weight-medium) var(--text-s)/1 var(--font-brand);letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:color var(--motion-fast) var(--ease-rise),opacity var(--motion-fast) var(--ease-rise);
}
.k-seg-option:hover:not([aria-pressed=true],[aria-current=page],:disabled){color:var(--ink)}
.k-seg-option:is([aria-pressed=true],[aria-current=page]){color:var(--ink)}
.k-seg-option:active:not(:disabled){opacity:.72}
.k-seg-option:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:-1px}
.k-seg-option:disabled{color:var(--disabled);cursor:default}
/* A one-step choice (value null) has no thumb: each option is a quiet button on the track. */
.k-seg:not([data-at]) .k-seg-option:hover:not(:disabled){background:var(--seg-thumb)}
/* What a segment holds, after its word: a count in tabular figures, then a status dot. */
.k-seg-label{min-width:0}
.k-seg-count{color:var(--muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.k-seg-option:is([aria-pressed=true],[aria-current=page]) .k-seg-count{color:var(--ink)}
.k-seg[data-size=s] .k-seg-option{height:calc(var(--space-6) + var(--space-1));padding:0 var(--space-3);font-size:var(--text-xs)}

/* 8 Chip */
.k-chip{
  display:inline-flex;align-items:center;flex:0 0 auto;height:var(--icon-target);margin:0;padding:0 var(--space-4);border:0;border-radius:var(--radius-m);
  background:var(--element);color:var(--ink);font:var(--weight-medium) var(--text-s)/1 var(--font-brand);letter-spacing:0;white-space:nowrap;cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-rise),color var(--motion-fast) var(--ease-rise);
}
.k-chip:hover:not([aria-pressed=true],:disabled){background:var(--element-deep)}
.k-chip[aria-pressed=true]{background:var(--surface-selected);color:var(--page)}
.k-chip:disabled{color:var(--disabled);cursor:default}

/* 9 StatusDot: shape and colour (filled, ring, ringed red) */
.k-dot{display:inline-block;flex:0 0 auto;width:var(--dot);height:var(--dot);border-radius:var(--radius-full);background:var(--ink);vertical-align:middle}
.k-dot[data-pip]{width:var(--pip);height:var(--pip)}
.k-dot[data-tone=attention]{background:var(--ink-attention)}
/* alert (blocked): a yellow roadworks triangle with an ink exclamation mark, drawn by statusDot as an SVG. */
.k-dot[data-tone=alert]{width:calc(var(--dot) + var(--space-1));height:calc(var(--dot) + var(--space-1));border-radius:0;background:transparent;box-shadow:none}
.k-dot[data-tone=alert][data-pip]{width:calc(var(--pip) + var(--space-1));height:calc(var(--pip) + var(--space-1))}
.k-dot-blocked{display:block;width:100%;height:100%;overflow:visible}
/* A blocked sign that leads to its blocker (statusDot go, pathLine blocker): clickable wherever it sits, above the
   row's stretched hit area, with a 24 px target around the 12 px sign. */
.k-dot[data-blocker-project],.k-stage-node[data-blocker-project]{position:relative;z-index:2;cursor:pointer}
.k-dot[data-blocker-project]::after,.k-stage-node[data-blocker-project]>.k-stage-sign::after{content:'';position:absolute;inset:calc(var(--space-1) * -1.5)}
.k-dot[data-blocker-project]:hover .k-dot-sign,.k-stage-node[data-blocker-project]:hover .k-dot-sign{stroke-width:2.6}
.k-dot-blocked .k-dot-sign{fill:var(--ink-blocked);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.k-dot-blocked .k-dot-mark{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.k-dot[data-tone=ring]{background:transparent;box-shadow:inset 0 0 0 var(--stroke) var(--ink-attention)}
.k-dot[data-tone=open]{background:transparent;box-shadow:inset 0 0 0 var(--stroke) var(--line-control)}
.k-dot[data-tone=ink]{background:var(--ink)}
/* halo: a pip on a selected (black) bar keeps a page-colour ring, so it reads against the fill. */
.k-dot[data-halo]{box-shadow:0 0 0 2px var(--page)}
.k-dot[data-halo][data-tone=alert]{box-shadow:none}
.k-dot[data-halo][data-tone=alert] .k-dot-sign{stroke:var(--page)}

/* 10 Count and 11 Badge */
.k-count{display:inline-grid;place-items:center;flex:0 0 auto;min-width:var(--count-size);height:var(--count-size);padding:0 var(--space-2);border-radius:var(--radius-full);background:var(--plate);color:var(--ink);font:var(--weight-regular) var(--text-xs)/1 var(--font-brand);letter-spacing:0;font-variant-numeric:tabular-nums}
:is(.k-plate,.k-next,[aria-current=page],[aria-pressed=true],[data-current]>.k-row-head) .k-count{background:var(--page)}
.k-badge{display:inline-flex;align-items:center;flex:0 0 auto;height:var(--label-height);max-width:100%;padding:0 var(--space-3);border-radius:var(--radius-full);background:var(--plate);color:var(--ink);font:var(--weight-regular) var(--text-xs)/1 var(--font-brand);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-badge[data-phase="0"]{background:var(--tone-0)}
.k-badge[data-phase="1"]{background:var(--tone-1)}
.k-badge[data-phase="2"]{background:var(--tone-2)}
.k-badge[data-phase="3"]{background:var(--tone-3)}

/* 12 Person */
.k-person{
  position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--label-height);height:var(--label-height);margin:0;padding:0;border:0;border-radius:var(--radius-full);
  overflow:hidden;background:var(--avatar-2);color:var(--avatar-ink);font:var(--weight-medium) var(--text-xs)/1 var(--font-brand);letter-spacing:0;text-transform:uppercase;
  transition:box-shadow var(--motion-fast) var(--ease-rise);
}
.k-person[data-size="28"]{width:calc(var(--space-6) + var(--space-1));height:calc(var(--space-6) + var(--space-1))}
.k-person[data-size="32"]{width:var(--space-8);height:var(--space-8)}
.k-person[data-tone="0"]{background:var(--avatar-0)}
.k-person[data-tone="1"]{background:var(--avatar-1)}
.k-person[data-tone="2"]{background:var(--avatar-2)}
.k-person[data-tone="3"]{background:var(--avatar-3)}
.k-person-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* An interactive 32 px avatar (the header's account) keeps a 40 px target (§11.10): a transparent ring around
   the face takes the click while the face stays 32. The photo keeps the circle without overflow:hidden. */
button.k-person[data-size="32"]{overflow:visible}
button.k-person[data-size="32"]::after{content:'';position:absolute;inset:calc((var(--space-8) - var(--icon-target)) / 2);border-radius:var(--radius-full)}
button.k-person[data-size="32"]>.k-person-photo{border-radius:inherit}
/* Empty: a grey head-and-shoulders portrait (no one yet); interactive ones show a + badge on hover or focus. */
.k-person[data-empty]{overflow:visible;background:transparent;box-shadow:none;color:var(--person-empty)}
.k-person[data-empty] .k-person-silhouette{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--radius-full);background:var(--plate);fill:currentColor;transition:color var(--motion-fast) var(--ease-rise)}
button.k-person[data-empty]:is(:hover,:focus-visible) .k-person-silhouette{color:var(--person-empty-hover)}
.k-person[data-empty]>.br-icon{position:absolute;right:calc(var(--space-1) * -1);bottom:calc(var(--space-1) * -1);width:var(--space-3);height:var(--space-3);padding:1px;border-radius:var(--radius-full);background:var(--ink);color:var(--page);opacity:0;transition:opacity var(--motion-fast) var(--ease-rise)}
button.k-person{cursor:pointer}
button.k-person:hover:not([data-empty]){box-shadow:0 0 0 2px var(--page),0 0 0 calc(2px + var(--stroke)) var(--line)}
:is(button.k-person,.k-person-named:is(button)):is(:hover,:focus-visible) .br-icon,button.k-person[data-empty]:is(:hover,:focus-visible)>.br-icon{opacity:1}
.k-person-named{display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;margin:0;padding:0;border:0;background:none;color:var(--ink);font:var(--weight-medium) var(--text-s)/var(--leading-snug) var(--font-brand);letter-spacing:0;text-align:left}
button.k-person-named{border-radius:var(--radius-s);cursor:pointer}
.k-person-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-person-named[data-empty]{color:var(--muted);font-weight:var(--weight-regular)}
/* reveal: an open slot rests as its grey portrait; the word comes in on the row's hover or focus (always on touch). */
.k-person-named[data-reveal] .k-person-name{opacity:0;transition:opacity var(--motion-fast) var(--ease-rise)}
.k-row-head:is(:hover,:focus-within) .k-person-named[data-reveal] .k-person-name{opacity:1}
@media (hover:none){.k-person-named[data-reveal] .k-person-name{opacity:1}}

/* 13 Stub: the one way to show something missing */
.k-stub{
  display:inline-flex;align-items:center;gap:calc(var(--space-1) * 1.5);flex:0 1 auto;height:var(--stub-height);max-width:100%;margin:0;padding:0 var(--space-3);
  border:1px dashed var(--line-dash);border-radius:var(--radius-m);background:transparent;color:var(--muted);font:var(--weight-regular) var(--text-xs)/1 var(--font-brand);letter-spacing:0;
  white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-rise),color var(--motion-fast) var(--ease-rise);
}
.k-stub>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.k-stub>.br-icon{width:var(--icon-size-xs);height:var(--icon-size-xs)}
.k-stub:hover:not(:disabled,[aria-disabled=true]){background:var(--plate);color:var(--ink)}
.k-stub:is(:disabled,[aria-disabled=true]){color:var(--disabled);cursor:default}
/* quiet: its words alone at rest, level with the text around it (a placeholder line). Pointing at or focusing its
   row, or the stub, draws the dashed outline and the + around the words, reaching into the gutter on the left by
   the stub's padding, icon and gap, so the words never move. */
.k-stub[data-quiet]{position:relative;isolation:isolate;padding:0;border:0;overflow:visible}
.k-stub[data-quiet]::before{content:'';position:absolute;z-index:-1;inset:0 calc(var(--space-3) * -1) 0 calc((var(--space-3) + var(--icon-size-xs) + var(--space-1) * 1.5) * -1);border:1px dashed var(--line-dash);border-radius:var(--radius-m);opacity:0;transition:opacity var(--motion-fast) var(--ease-rise),background-color var(--motion-fast) var(--ease-rise),box-shadow var(--motion-fast) var(--ease-rise)}
.k-stub[data-quiet]>.br-icon{position:absolute;left:calc((var(--icon-size-xs) + var(--space-1) * 1.5) * -1);opacity:0;transition:opacity var(--motion-fast) var(--ease-rise)}
:is(tr,.k-split-row,.k-fact,.k-row):is(:hover,:focus-within) .k-stub[data-quiet]:not(:disabled,[aria-disabled=true])>.br-icon,:is(tr,.k-split-row,.k-fact,.k-row):is(:hover,:focus-within) .k-stub[data-quiet]:not(:disabled,[aria-disabled=true])::before,.k-stub[data-quiet]:is(:hover,:focus-visible)::before,.k-stub[data-quiet]:is(:hover,:focus-visible)>.br-icon{opacity:1}
.k-stub[data-quiet]:hover:not(:disabled,[aria-disabled=true]){background:transparent}
.k-stub[data-quiet]:hover:not(:disabled,[aria-disabled=true])::before{background:var(--plate)}
.k-stub[data-quiet]:focus-visible{outline:0}
.k-stub[data-quiet]:focus-visible::before{box-shadow:0 0 0 var(--focus-width) var(--focus-ring)}

/* 14 PageHeader: the page bar. The crumb and the sidebar name the place, so the H1 is sr-only (print shows it) and
   what remains is the page's own controls in one 40 px row. The bar holds the top of the page region: it cancels
   the region's 32 px top padding and is sticky there, so its tools never move while the page scrolls under it, on
   the page's own fill drawn edge to edge (a border-image outset: paint only, so the region never scrolls sideways).
   Its bottom padding is taken back by a matching negative margin, so each page keeps its own rhythm under the bar
   (sticky offsets count from inside the region's padding, hence the negative top).
   Once the page is under it, a hairline fades in with the scroll (a scroll-driven animation; without one the bar
   simply has no line). Anchors and focus stop clear of it (scroll-padding). A page's own sticky parts pin flush
   under it at top: var(--k-bar-end) (the bar's foot, counted from inside the region's padding as the bar's top is;
   without a bar, the region's top edge). A status alone (no controls) is an
   ordinary row that scrolls away; a page with nothing to show has no bar, its header keeps only the H1 and takes no
   room. A canvas header sits in its own toolbar, which never scrolls. */
@property --k-bar-line{syntax:'<color>';inherits:false;initial-value:transparent}
.k-page-header{display:grid;min-width:0}
.k-page-header[data-bare]{display:contents}
.k-page-header-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-height:var(--icon-target)}
.k-page-header[data-bar]{position:sticky;top:calc(var(--space-8) * -1);z-index:var(--z-sticky);margin-block:calc(var(--space-8) * -1) calc(var(--space-3) * -1);padding-block:var(--space-3);border-image:linear-gradient(0deg,var(--k-bar-line) 1px,var(--page) 0) fill 0/0/0 100vmax}
@supports (animation-timeline:scroll()){
  .k-page-header[data-bar]{animation:k-bar-line var(--motion-fast) linear both;animation-timeline:scroll();animation-range:var(--space-1) var(--space-6)}
}
@keyframes k-bar-line{to{--k-bar-line:var(--line-soft)}}
main{--k-bar-end:calc(var(--space-8) * -1)}
main:has(.k-page-header[data-bar]){--k-bar-end:calc(var(--icon-target) + var(--space-3) * 2 - var(--space-8));scroll-padding-top:calc(var(--icon-target) + var(--space-8))}
.k-page-title:focus{outline:0}
.k-page-status{display:inline-flex;align-items:center;gap:calc(var(--space-1) * 1.5);font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-page-status>.br-icon,.k-section-summary>.br-icon{width:var(--icon-size-xs);height:var(--icon-size-xs)}
.k-page-header-tools{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}
.k-page-header-tools>.k-btn{margin-left:var(--space-2)}
.k-divider{flex:0 0 auto;width:1px;height:var(--space-6);margin:0 var(--space-2);background:var(--line-soft)}
.k-page-header[data-canvas] .k-page-header-row{min-height:0}

/* 15 Section and legend */
.k-section{min-width:0}
.k-section-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-height:var(--space-8);margin-bottom:var(--space-4)}
.k-section-title{margin:0;color:var(--ink);font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-title)}
.k-section[data-level="3"]>.k-section-head{margin-bottom:var(--space-3)}
.k-section[data-level="3"] .k-section-title{font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:0}
.k-section[data-level="3"][data-folds]>.k-section-head{min-height:calc(var(--space-12) + var(--space-1));margin:0;border-top:1px solid var(--line-soft)}
.k-section[data-level="3"][data-folds] .k-section-summary{margin-left:auto}
.k-section[data-level="3"][data-folds] .k-section-summary+.k-section-tools{margin-left:0}
.k-section-summary{display:inline-flex;align-items:center;gap:calc(var(--space-1) * 1.5);min-width:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-section-tools{display:flex;align-items:center;gap:var(--space-3);margin-left:auto}
.k-section-tools>.k-icon-btn[aria-expanded]>.br-icon{transition:transform var(--motion-fast) var(--ease-rise)}
.k-section-tools>.k-icon-btn[aria-expanded=true]>.br-icon{transform:rotate(180deg)}
/* A chapter's rule is the quietest hairline: the 20/600 title and the 64 px head part the chapters, the line only hints. */
.k-section[data-chapter]{border-top:1px solid var(--line-soft)}
.k-section[data-chapter]>.k-section-head{flex-wrap:nowrap;gap:var(--space-4);min-height:var(--space-16);margin-bottom:0}
.k-section[data-chapter] .k-section-title{flex:0 0 auto;min-width:var(--title-column)}
.k-section[data-chapter]>.k-section-body:not([hidden]){padding:var(--space-2) 0 var(--space-6)}
/* A level 3 section inside a chapter labels a group of the chapter's rows (Strategy's Channel roles): a 12 muted
   label in sentence case with its count (16 Oct 2026: mono stays for ruler months, LIVE and media-tile pills), so the
   rows' own titles stay the larger type. */
.k-section[data-chapter] .k-section[data-level="3"]:not([data-folds])>.k-section-head{min-height:0;margin-bottom:var(--space-1)}
.k-section[data-chapter] .k-section[data-level="3"]:not([data-folds]) .k-section-title{min-width:0;color:var(--muted);font:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-brand);letter-spacing:0}
.k-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-4);margin:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-legend-item{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
/* In a legend every glyph keeps the 8 px box: the alert ring is drawn inside it, never around it. */
.k-legend .k-dot[data-tone=alert]{background:transparent;box-shadow:none}
.k-facts+.k-legend,.k-facts-cols+.k-legend{margin-top:var(--space-3)}

/* 16 List and RecordRow */
.k-list[data-plain]{border:0;border-radius:0;background:transparent;overflow:visible}
.k-row+.k-row{border-top:1px solid var(--line-soft)}
.k-list[data-plain]>.k-row+.k-row{border-top:0;box-shadow:0 -1px 0 var(--line-soft)}
.k-row-head{position:relative;display:grid;grid-template-columns:var(--dot) minmax(0,1fr) auto;align-items:center;column-gap:var(--space-4);min-height:var(--row-height);padding:var(--space-2) var(--space-5);transition:background-color var(--motion-fast) var(--ease-rise)}
.k-list[data-plain] .k-row-head{padding-inline:var(--space-4);border-radius:var(--radius-m)}
.k-row-head:has(.k-row-title:is(a,button)):hover,.k-row[data-current]>.k-row-head{background:var(--plate)}
.k-row-dot{display:flex;align-items:center;justify-content:center;width:var(--dot)}
/* lead 'person': the avatar first, in the dot column (directory rows, §5.15). The column grows to the avatar,
   so the name starts beside it instead of under it. */
.k-row[data-lead=person]>.k-row-head{grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--space-3)}
.k-row[data-lead=person] .k-row-dot{width:auto;min-width:var(--space-6)}
.k-row-main{display:grid;min-width:0}
.k-row-title{display:block;min-width:0;margin:0;padding:0;border:0;background:none;color:var(--ink);font:var(--weight-medium) var(--text-s)/var(--leading-snug) var(--font-brand);letter-spacing:0;text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-row-title:is(a,button){cursor:pointer}
.k-row-title:is(a,button)::after{content:'';position:absolute;inset:0;border-radius:inherit}
.k-row-title:focus-visible{outline:0}
.k-row-head:has(.k-row-title:focus-visible){box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
.k-row-meta{display:block;min-width:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-row-alert{font-style:normal;color:var(--ink-alert)}
.k-row-end{display:flex;align-items:center;gap:var(--space-3)}
.k-row-end :is(a,button){position:relative;z-index:1}
.k-row-step{font-size:var(--text-s);font-weight:var(--weight-medium);color:var(--ink);opacity:0;transition:opacity var(--motion-fast) var(--ease-rise)}
.k-row-head:is(:hover,:focus-within) .k-row-step{opacity:1}
.k-row-chevron{display:inline-grid;place-items:center;color:var(--muted);pointer-events:none}
.k-row-chevron>.br-icon{width:var(--icon-size-s);height:var(--icon-size-s);transition:transform var(--motion-fast) var(--ease-rise)}
.k-row[data-expanded]>.k-row-head .k-row-chevron>.br-icon{transform:rotate(90deg)}
.k-row-body{padding:0 var(--space-5) var(--space-4) calc(var(--space-5) + var(--dot) + var(--space-4))}
.k-row[data-lead=none]>.k-row-head{grid-template-columns:minmax(0,1fr) auto}
.k-row[data-lead=none]>.k-row-body{padding-left:var(--space-5)}
.k-row[data-lead=check]>.k-row-head{grid-template-columns:var(--check-size) minmax(0,1fr) auto;column-gap:var(--space-3)}
.k-row[data-lead=check] .k-row-dot{width:var(--check-size)}
.k-row-dot>.k-check{position:relative;z-index:1;min-height:0;padding:0}
.k-row[data-dense]>.k-row-head{min-height:var(--control)}
.k-row[data-inline] .k-row-main{grid-template-columns:var(--title-column) minmax(0,1fr);align-items:center;column-gap:var(--space-4)}
.k-row[data-inline] .k-row-title{grid-row:1 / span 2}
.k-row[data-inline] :is(.k-row-meta,.k-row-detail){grid-column:2}
.k-row[data-inline] .k-row-detail{grid-row:1}
.k-row[data-inline] .k-row-main:has(.k-row-detail) .k-row-meta{grid-row:2}
.k-row[data-quiet] .k-row-title{font-weight:var(--weight-regular);color:var(--muted)}
/* A closed row (a done or dismissed item kept in its place): the title struck through and muted, so the list keeps
   its order and shows progress. Its meta line says which, so the state never rests on the line alone. */
.k-row[data-closed] .k-row-title{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.k-row-detail{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.k-row-detail :is(a,button){position:relative;z-index:1}
.k-list[data-plain]>.k-row[data-lead=check]>.k-row-head{padding-inline:0}
.k-list[data-plain][data-inset]>.k-row[data-lead=check]>.k-row-head{padding-inline:var(--space-4)}
@media(hover:none){.k-row-step{display:none}}

/* 17 Facts */
.k-facts{width:100%;border-collapse:collapse;font-size:var(--text-s);line-height:var(--leading-normal)}
.k-facts-label,.k-facts-value,.k-facts-status{padding:var(--space-3) 0;border-top:1px solid var(--line-soft);vertical-align:baseline}
.k-facts-label{width:var(--label-column);padding-right:var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--muted);text-align:left}
.k-facts-value{color:var(--ink);overflow-wrap:anywhere}
.k-facts-value>.k-editable{margin-block:calc(var(--space-2) * -1)}
.k-facts-status{width:var(--space-8);text-align:right}
/* dense: a properties block (the record panel's When · Owner · Sends to): 40 px rows, no hairlines, label and value centred. */
.k-facts[data-dense] :is(.k-facts-label,.k-facts-value,.k-facts-status){height:var(--space-10);padding-block:0;border-top:0;vertical-align:middle}
.k-facts[data-dense] .k-facts-value>.k-editable{margin-block:0}
.k-facts-source{margin-left:var(--space-2);font-size:var(--text-xs);color:var(--muted)}
.k-facts-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5) var(--space-8);margin:0}
.k-fact{display:grid;align-content:start;gap:2px;min-width:0}
.k-fact-label{display:flex;align-items:center;gap:calc(var(--space-1) * 1.5);font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-fact-value{margin:0;font-size:var(--text-s);line-height:var(--leading-normal);color:var(--ink)}
/* Split: the title in the title column (level with a chapter title), its body on the right; scan the left edge. */
.k-split{display:grid;margin:0}
.k-split-row{display:grid;grid-template-columns:var(--title-column) minmax(0,1fr);column-gap:var(--space-4);align-items:baseline;padding:var(--space-4) 0}
.k-split-row+.k-split-row{border-top:1px solid var(--line-soft)}
.k-split-title{display:flex;align-items:center;gap:calc(var(--space-1) * 1.5);min-width:0;margin:0;color:var(--ink);font-size:var(--text-m);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:var(--tracking-title)}
.k-split-link{position:relative;isolation:isolate;color:inherit;text-decoration:none;transition:transform var(--motion-cursor) var(--ease-out)}
/* A row's title that opens it is a button, not a link: its words on a plate under the pointer or the keyboard (::before, past the box), a step deeper while held. */
.k-split-link::before{content:'';position:absolute;inset:calc(var(--space-1) * -1) calc(var(--space-2) * -1);z-index:-1;border-radius:var(--radius-s);background:var(--plate);opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-rise),background-color var(--motion-fast) var(--ease-rise)}
.k-split-link:is(:hover,:focus-visible)::before{opacity:1}
.k-split-link:active{transform:scale(.98)}
.k-split-link:active::before{background:var(--plate-hover)}
.k-split-link:focus-visible{outline:0}
.k-split-link:focus-visible::before{box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
.k-split-body{min-width:0;max-width:72ch;margin:0;color:var(--prose);font-size:var(--text-s);line-height:var(--leading-normal);overflow-wrap:anywhere}
.k-split-body>.k-editable{margin-block:calc(var(--space-2) * -1)}
.k-split+.k-legend{margin-top:var(--space-3)}

/* 19 More (index row) */
.k-more{border-top:1px solid var(--line-soft)}
.k-more-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-5);min-height:var(--control)}
.k-more-label{font-size:var(--text-xs);color:var(--muted)}
.k-more-item{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--icon-target-sm);margin:0;padding:0;border:0;background:none;color:var(--ink);font:var(--weight-medium) var(--text-s)/var(--leading-snug) var(--font-brand);letter-spacing:0;cursor:pointer;transition:transform var(--motion-cursor) var(--ease-out)}
/* An index item is a button: a plate rises behind it under the pointer or the keyboard and stays while its body is open. */
.k-more-item::before{content:'';position:absolute;inset:calc(var(--space-1) / 2) calc(var(--space-2) * -1);z-index:-1;border-radius:var(--radius-s);background:var(--plate);opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-rise),background-color var(--motion-fast) var(--ease-rise)}
.k-more-item:is(:hover,:focus-visible,[aria-expanded=true])::before{opacity:1}
.k-more-item:active{transform:scale(.97)}
.k-more-item:active::before{background:var(--plate-hover)}
.k-more-item:focus-visible{outline:0}
.k-more-item:focus-visible::before{box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
.k-more-count{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--muted)}
.k-more-body{padding:var(--space-2) 0 var(--space-6)}

/* 20 PathLine (§6.8) */
.k-path{position:relative;min-width:0;color:var(--ink)}
.k-path-stages{display:flex;margin:0;padding:0;list-style:none}
.k-stage{position:relative;min-width:0}
.k-stage-link{display:flex;flex-direction:column;align-items:flex-start;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none}
:is(a,button).k-stage-link{border-radius:var(--radius-s);cursor:pointer}
:is(a,button).k-stage-link:focus-visible{outline-offset:4px}
.k-stage-node{position:relative;display:grid;place-items:center;flex:0 0 auto;width:var(--dot);height:var(--dot);border-radius:var(--radius-full);background:var(--line-ink);color:var(--ink)}
.k-stage-node>.br-icon{width:var(--space-3);height:var(--space-3);stroke-width:2.2}
.k-stage-label{font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--muted);white-space:nowrap}
.k-stage-meta{font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--muted);white-space:nowrap}
.k-stage:is([data-state=done],[data-state=part],[data-state=now]) .k-stage-label,:is(a,button).k-stage-link:hover .k-stage-label{color:var(--ink)}
.k-stage[data-state=now] .k-stage-node{width:var(--space-3);height:var(--space-3);background:var(--accent);box-shadow:inset 0 0 0 var(--stroke) var(--line-ink),0 0 0 var(--space-1) var(--halo)}
.k-stage[data-state=ahead] .k-stage-node{background:transparent;box-shadow:inset 0 0 0 var(--stroke) var(--line-dash)}
/* A node chosen on the path pulses its halo once before its place opens (§8.2; app.js sets data-pulse). */
.k-stage[data-pulse] .k-stage-node{animation:k-stage-pulse var(--motion-fast) var(--ease-rise) both}
@keyframes k-stage-pulse{from{box-shadow:0 0 0 0 var(--halo)}to{box-shadow:0 0 0 var(--space-2) transparent}}
.k-stage[data-state=part] .k-stage-node{background:var(--page);box-shadow:inset 0 0 0 var(--stroke) var(--line-ink)}
.k-stage[data-blocked] .k-stage-node::before{content:'';position:absolute;top:0;right:0;width:var(--dot);height:var(--dot);border-radius:var(--radius-full);background:var(--ink-attention);box-shadow:0 0 0 2px var(--page);transform:translate(40%,-40%)}
.k-stage[data-blocked] .k-stage-node::before{width:calc(var(--dot) + var(--space-1));height:calc(var(--dot) + var(--space-1));border-radius:0;background:var(--ink);box-shadow:none;clip-path:polygon(50% 0,100% 92%,0 92%)}
.k-stage[data-blocked] .k-stage-node::after{content:'';position:absolute;top:0;right:0;width:calc(var(--dot) + var(--space-1));height:calc(var(--dot) + var(--space-1));background:var(--ink-blocked);clip-path:polygon(50% 24%,85% 84%,15% 84%);transform:translate(40%,-40%)}
/* hero and vertical draw the real sign (the status dot's), so the CSS triangles above stay with the dots. */
.k-path:is([data-size=hero],[data-size=vertical]) .k-stage[data-blocked] .k-stage-node::before{display:none}
.k-path:is([data-size=hero],[data-size=vertical]) .k-stage[data-blocked]:not([data-state=now]) .k-stage-node::after{display:none}
.k-path:is([data-size=hero],[data-size=vertical]) .k-stage[data-blocked][data-state=now] .k-stage-node::after{position:static;clip-path:none;transform:none}
.k-stage-sign{position:absolute;top:calc(var(--space-1) * -1);right:calc(var(--space-1) * -1);width:var(--icon-size-xs);height:var(--icon-size-xs);filter:drop-shadow(0 0 1px var(--page));transform:translate(30%,-20%)}
.k-stage-tip{display:none}

/* hero and vertical: each stage draws its stretch of line to the next node, dashed, inked over by its fill. A
   stage with a fill (data-fill) starts empty and applyKitGeometry inks it (--k-fill), so its first view draws in
   rather than shrinking back; without one the walk reaches the now node and goes on by --k-progress. The ink glides
   (transform only); the first view staggers it node by node (--k-walk-delay). */
.k-path:is([data-size=hero],[data-size=vertical]) .k-stage{--k-fill:0;--k-walk-time:var(--motion-travel);--k-walk-delay:calc(var(--motion-fast) * 0)}
.k-path:is([data-size=hero],[data-size=vertical]) .k-stage:not([data-fill]):is([data-state=done],[data-state=part]){--k-fill:1}
.k-path:is([data-size=hero],[data-size=vertical]) .k-stage:not([data-fill])[data-state=now]{--k-fill:var(--k-progress,0)}
.k-stage-seg{position:absolute;pointer-events:none}
.k-stage-walk{position:absolute;inset:0;background:var(--line-ink);transform:scaleX(var(--k-fill));transform-origin:left center;transition:transform var(--k-walk-time) var(--ease-glide) var(--k-walk-delay)}

/* hero: labels under their nodes. Five columns at 0, 23, 46, 69 and 92 %, or, closed by an end (Live), five equal
   columns and the end's own. The stretch of each stage runs from its node's centre to the next one. */
.k-path[data-size=hero]{--k-step:23%;--k-end-width:calc(var(--space-30) + var(--space-2))}
.k-path[data-size=hero][data-end]{--k-step:calc((100% - var(--k-end-width)) / 5)}
.k-path[data-size=hero] .k-path-stages{position:relative;display:grid;grid-template-columns:repeat(4,23%) minmax(0,1fr)}
.k-path[data-size=hero][data-end] .k-path-stages{grid-template-columns:repeat(5,minmax(0,1fr)) var(--k-end-width)}
.k-path[data-size=hero] .k-stage-seg{top:calc(var(--node-now) / 2 - 1px);left:calc(var(--node-now) / 2);width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--line-dash) 0 var(--space-1),transparent var(--space-1) var(--space-2))}
.k-path[data-size=hero] .k-stage-link{width:max-content;max-width:100%;padding-right:var(--space-2)}
/* A narrow hero (Roger docked, a laptop) clips a stage's meta line to its own column, never into the next stage. */
.k-path[data-size=hero] .k-stage:not(:last-child) .k-stage-meta{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.k-path[data-size=hero] .k-stage-node{width:var(--node);height:var(--node);margin:calc((var(--node-now) - var(--node)) / 2);background:var(--page);box-shadow:inset 0 0 0 var(--stroke) var(--line-ink);transition:transform var(--motion-fast) var(--ease-rise),box-shadow var(--motion-fast) var(--ease-rise)}
/* done: a solid ink disc with the check in page colour; part: an ink ring (its stretch says how far); ahead: a dashed-grey ring */
.k-path[data-size=hero] .k-stage[data-state=done] .k-stage-node{background:var(--line-ink);color:var(--page);box-shadow:none}
.k-path[data-size=hero] .k-stage[data-state=ahead] .k-stage-node{box-shadow:inset 0 0 0 var(--stroke) var(--line-dash)}
.k-path[data-size=hero] .k-stage[data-state=now] .k-stage-node{width:var(--node-now);height:var(--node-now);margin:0;background:var(--accent);box-shadow:inset 0 0 0 var(--stroke) var(--line-ink),0 0 0 var(--halo-width) var(--halo)}
.k-path[data-size=hero] .k-stage[data-state=now] .k-stage-node::after,.k-path[data-size=vertical] .k-stage[data-state=now] .k-stage-node::after{content:'';width:var(--dot);height:var(--dot);border-radius:var(--radius-full);background:var(--line-ink)}
.k-path[data-size=hero] .k-stage-label{margin-top:var(--space-3)}
.k-path[data-size=hero] .k-stage[data-state=now] .k-stage-label{margin-top:var(--space-2);font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
.k-path[data-size=hero] .k-stage[data-state=now] .k-stage-meta{max-width:min(var(--path-meta-width),100%);white-space:normal}
/* A stage whose back-planned day has passed: its fact in the attention ink, after a small pip. */
.k-path:is([data-size=hero],[data-size=vertical]) .k-stage[data-late] .k-stage-meta{color:var(--ink-attention-text)}
.k-path:is([data-size=hero],[data-size=vertical]) .k-stage[data-late] .k-stage-meta::before{content:'';display:inline-block;width:var(--pip);height:var(--pip);margin:0 var(--space-1) 0 0;border-radius:var(--radius-full);background:var(--ink-attention);vertical-align:.1em}
/* Hover and keyboard focus: the node lifts a little and the label inks; the callout follows (controls.js). */
@media (hover:hover){
  .k-path[data-size=hero] :is(a,button).k-stage-link:hover .k-stage-node{transform:scale(1.12)}
  .k-path[data-size=hero] .k-stage[data-state=ahead] :is(a,button).k-stage-link:hover .k-stage-node{box-shadow:inset 0 0 0 var(--stroke) var(--line-ink)}
}
.k-path[data-size=hero] :is(a,button).k-stage-link:focus-visible .k-stage-node{transform:scale(1.12)}
.k-path[data-size=hero] :is(a,button).k-stage-link:hover .k-stage-meta{color:var(--subtle)}
.k-path[data-size=hero] .k-stage[data-late] :is(a,button).k-stage-link:hover .k-stage-meta{color:var(--ink-attention-text)}
/* The end (Live): a square node closing the line, its label like a stage's, then whatever the page puts under it. */
.k-stage-end{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.k-path[data-size=hero] .k-stage-end>.k-stage-node{border-radius:var(--radius-xs)}
.k-path[data-size=hero] .k-stage-end[data-dashed]>.k-stage-node{box-shadow:none;outline:var(--stroke) dashed var(--line-ink);outline-offset:calc(var(--stroke) * -1)}
.k-path[data-size=hero] .k-stage-end[data-state=done]>.k-stage-node{background:var(--line-ink)}
.k-path[data-size=hero] .k-stage-end>.k-stage-label{color:var(--ink)}
/* Today and the lag, placed in stages along the line (--k-at, --k-from, --k-to: 0 is the first node's centre). */
.k-path-time{position:absolute;top:0;left:0;right:0;height:var(--node-now);pointer-events:none}
.k-path-lag{position:absolute;top:calc(var(--node-now) / 2 - var(--space-2));left:calc(var(--node-now) / 2 + var(--k-from,0) * var(--k-step));width:calc((var(--k-to,0) - var(--k-from,0)) * var(--k-step));height:var(--space-4);border-radius:var(--radius-full);background:linear-gradient(90deg,transparent,var(--tint-attention) var(--space-8))}
/* Today as the Brand Calendar draws it: an ink dot on a hairline, standing over the line; its date is the tooltip
   (the dot is the hover target, a little larger than it looks). */
.k-path-today{position:absolute;top:calc(var(--space-4) * -1);left:calc(var(--node-now) / 2 + var(--k-at,0) * var(--k-step));width:0;height:calc(var(--node-now) / 2 + var(--space-4) + var(--space-3));border-left:1px solid var(--line-control)}
.k-path-today::before{content:'';position:absolute;top:calc(var(--dot) / -2);left:calc(var(--dot) / -2 - 1px);width:var(--dot);height:var(--dot);border-radius:var(--radius-full);background:var(--ink);box-shadow:0 0 0 2px var(--page)}
.k-path-today::after{content:'';position:absolute;top:calc(var(--space-3) * -1);left:calc(var(--space-3) * -1);width:var(--space-6);height:var(--space-6);pointer-events:auto}
/* compact (calendar preview) and mini (kickoff progress): dots joined by lines */
.k-path:is([data-size=compact],[data-size=mini]) .k-path-stages{align-items:center}
.k-path[data-size=compact] .k-stage{display:flex;flex:1 1 auto;align-items:center}
.k-path[data-size=compact] .k-stage:first-child{flex:0 0 auto}
.k-path:is([data-size=compact],[data-size=mini],[data-size=inline]) .k-stage+.k-stage::before{content:'';flex:1 1 auto;height:var(--stroke);background:var(--line-ink)}
.k-path:is([data-size=compact],[data-size=mini],[data-size=inline]) .k-stage[data-state=ahead]::before{background:repeating-linear-gradient(90deg,var(--line-dash) 0 3px,transparent 3px var(--space-2))}
.k-path[data-size=mini] .k-stage{display:flex;align-items:center;gap:var(--space-1)}
.k-path[data-size=mini] .k-stage+.k-stage::before{flex:0 0 var(--space-5)}
.k-path-caption{margin:var(--space-2) 0 0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-path-caption-stage{font-weight:var(--weight-medium);color:var(--ink)}
/* inline (brief lifecycle): dots and 14 px labels on one line, 28 px connectors */
.k-path[data-size=inline] .k-path-stages{flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
.k-path[data-size=inline] .k-stage{display:flex;align-items:center;gap:var(--space-3)}
.k-path[data-size=inline] .k-stage+.k-stage::before{flex:0 0 var(--node-now)}
.k-path[data-size=inline] .k-stage-link{flex-direction:row;align-items:center;gap:var(--space-2)}
.k-path[data-size=inline] .k-stage-label{font-weight:var(--weight-regular)}
.k-path[data-size=inline] .k-stage[data-state=now] .k-stage-label{font-weight:var(--weight-medium)}
.k-path[data-size=inline] .k-stage-meta{margin-left:calc(var(--space-1) * -1)}
/* vertical (phones): nodes in a 44 px column, labels beside, the Next card hung beside now */
.k-path[data-size=vertical]{--k-col:calc(var(--space-10) + var(--space-1))}
.k-path[data-size=vertical] .k-path-stages{display:block;padding-left:var(--k-col)}
.k-path[data-size=vertical] .k-stage{min-height:calc(var(--space-16) - var(--space-1));padding-top:var(--space-1)}
.k-path[data-size=vertical] .k-stage-seg{top:calc(var(--node-now) / 2);bottom:calc(var(--node-now) / -2);left:calc(var(--node-now) / 2 - var(--k-col) - 1px);width:2px;background:repeating-linear-gradient(180deg,var(--line-dash) 0 var(--space-1),transparent var(--space-1) var(--space-2))}
.k-path[data-size=vertical] .k-stage-walk{transform:scaleY(var(--k-fill));transform-origin:center top}
.k-path[data-size=vertical] .k-stage-node{position:absolute;top:calc(var(--node-now) / 2);left:calc(var(--node-now) / 2 - var(--k-col));width:var(--node);height:var(--node);background:var(--page);box-shadow:inset 0 0 0 var(--stroke) var(--line-ink);transform:translate(-50%,-50%)}
.k-path[data-size=vertical] .k-stage[data-state=done] .k-stage-node{background:var(--line-ink);color:var(--page);box-shadow:none}
.k-path[data-size=vertical] .k-stage[data-state=ahead] .k-stage-node{box-shadow:inset 0 0 0 var(--stroke) var(--line-dash)}
.k-path[data-size=vertical] .k-stage[data-state=now] .k-stage-node{width:var(--node-now);height:var(--node-now);background:var(--accent);box-shadow:inset 0 0 0 var(--stroke) var(--line-ink),0 0 0 calc(var(--halo-width) - 1px) var(--halo)}
.k-path[data-size=vertical] .k-stage[data-state=now] .k-stage-label{font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
.k-path[data-size=vertical] .k-stage-meta{white-space:normal}
.k-path-next{margin:var(--space-3) 0 var(--space-4)}

/* 21 NextStep (§6.8) */
.k-next{--k-pad-x:var(--space-10);--k-notch-at:0;position:relative;display:flex;align-items:center;gap:var(--space-6);min-width:0;border-radius:var(--radius-l);background:var(--plate);color:var(--ink)}
.k-next[data-notch="1"]{--k-notch-at:23}
.k-next[data-notch="2"]{--k-notch-at:46}
.k-next[data-notch="3"]{--k-notch-at:69}
.k-next[data-notch="4"]{--k-notch-at:92}
.k-next[data-variant=card]{padding:var(--space-5) var(--space-5) var(--space-5) calc(var(--space-6) + var(--space-1))}
.k-next[data-variant=card][data-notch]::before{
  content:'';position:absolute;top:calc(var(--notch-size) / -2);left:var(--k-notch,calc(var(--k-pad-x) + (100% - 2 * var(--k-pad-x)) * var(--k-notch-at) / 100 + var(--node-now) / 2));
  width:var(--notch-size);height:var(--notch-size);margin-left:calc(var(--notch-size) / -2);border-radius:var(--radius-xs) 0 0 0;background:var(--plate);transform:rotate(45deg);
}
.k-next-copy{flex:1 1 auto;min-width:0}
.k-next-kicker{display:block;flex:0 0 auto;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-next-title{margin:0;color:var(--ink);font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-title);overflow-wrap:anywhere}
.k-next[data-variant=card] .k-next-title{margin:2px 0}
.k-next-meta{margin:0;min-width:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-next-actions{display:flex;align-items:center;flex:0 0 auto;gap:var(--space-3);margin-left:auto}
.k-next-roger{display:inline-flex;align-items:center;gap:var(--space-2);flex:0 0 auto;height:var(--icon-target);margin:0;padding:0 var(--space-3);border:0;border-radius:var(--radius-m);background:transparent;color:var(--ink);font:var(--weight-medium) var(--text-s)/1 var(--font-brand);letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-rise)}
.k-next-roger:hover{background:var(--page)}
.k-next-more{position:relative;isolation:isolate;flex:0 0 auto;margin:0;padding:0;border:0;background:none;color:var(--muted);font:var(--weight-medium) var(--text-s)/1 var(--font-brand);letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;transition:color var(--motion-fast) var(--ease-rise),transform var(--motion-cursor) var(--ease-out)}
/* On the Next card's plate, the "more" link answers as a button: its words on a deeper plate (::before, past the box). */
.k-next-more::before{content:'';position:absolute;inset:calc(var(--space-2) * -1) calc(var(--space-2) * -1.25);z-index:-1;border-radius:var(--radius-s);background:var(--plate-hover);opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-rise),background-color var(--motion-fast) var(--ease-rise)}
.k-next-more:is(:hover,:focus-visible){color:var(--ink)}
.k-next-more:is(:hover,:focus-visible)::before{opacity:1}
.k-next-more:active{transform:scale(.97)}
.k-next-more:active::before{background:var(--plate-active)}
.k-next-more:focus-visible{outline:0}
.k-next-more:focus-visible::before{box-shadow:inset 0 0 0 var(--focus-width) var(--focus-ring)}
.k-next[data-variant=bar]{gap:var(--space-3);min-height:var(--row-height);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-5);border-radius:var(--radius-bar)}
.k-next[data-variant=bar] .k-next-title{flex:0 1 auto;min-width:0;font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-next[data-variant=bar] .k-next-meta{flex:0 100 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-next[data-variant=bar] .k-next-actions{padding-left:var(--space-4)}
.k-next[data-variant=bar] .k-next-roger{height:var(--control-sm)}
.k-next[data-status=all-clear] .k-next-title{font-weight:var(--weight-medium)}
.k-next[data-variant=card][data-status=all-clear] .k-next-title{font-weight:var(--weight-semibold)}
/* The card hung beside the vertical path, and every card on phones: copy, then a full-width primary, then
   Roger and "n more" on one line. */
.k-path-next .k-next[data-variant=card]{display:block;padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5)}
.k-path-next .k-next[data-variant=card][data-notch]::before{top:var(--space-6);left:0;margin-left:calc(var(--notch-size) / -2)}
.k-path-next .k-next-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);margin:var(--space-4) 0 0}
.k-path-next .k-next-actions>.k-btn{grid-column:1 / -1;order:-1;width:100%}
.k-path-next .k-next-roger{justify-self:start;padding:0}
.k-orb{display:inline-block;flex:0 0 auto;width:var(--icon-size-xs);height:var(--icon-size-xs);border-radius:var(--radius-full);background:var(--orb);box-shadow:var(--orb-glow);vertical-align:middle}
.k-orb[data-size=m]{width:calc(var(--icon-size-xs) + var(--space-1));height:calc(var(--icon-size-xs) + var(--space-1))}

/* 22 Dialog, Dock and Toast */
.k-dialog{--page:var(--float);width:min(var(--dialog-width),100vw - var(--space-8));max-height:min(90dvh,100dvh - var(--space-8));padding:0;border:0;border-radius:var(--radius-l);background:var(--page);color:var(--ink);box-shadow:var(--shadow-float)}
.k-dialog[data-size=l]{width:min(calc(var(--dialog-width) + var(--space-24) * 2),100vw - var(--space-8))}
.k-dialog::backdrop{background:var(--overlay)}
.k-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-shrink:0;padding:var(--space-5) var(--space-4) var(--space-1) calc(var(--space-6) + var(--space-1))}
.k-dialog-title{flex:1 1 auto;min-width:0;margin:0;padding:0;color:var(--ink);font-size:var(--text-l);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-title);overflow-wrap:anywhere}
.k-dialog-body{flex:1 1 auto;min-height:0;padding:var(--space-2) calc(var(--space-6) + var(--space-1)) var(--space-1);overflow-y:auto;overscroll-behavior:contain;font-size:var(--text-s);line-height:var(--leading-normal)}
.k-dialog-body>*+*{margin-top:var(--space-4)}
.k-dialog-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-5);flex-shrink:0;padding:var(--space-5) calc(var(--space-6) + var(--space-1)) var(--space-6);border:0;background:var(--page)}
/* Panels (foundations.css --panel): the plate steps inside them move one shade down. Each panel sets its own
   background to --panel where it is laid out. */
.shell-nav,.k-dock,.roger-panel,.assistant-chat{--plate:var(--panel-plate);--plate-hover:var(--panel-plate-hover);--plate-active:var(--panel-plate-active)}
.k-dock{
  --k-pad:calc(var(--space-6) + var(--space-1));position:fixed;top:calc(var(--header-height) + var(--shell-plates));right:0;bottom:0;z-index:var(--z-drawer);display:flex;flex-direction:column;width:min(var(--dock-width),100vw);
  background:var(--panel);color:var(--ink);border-left:1px solid var(--line-soft);box-shadow:var(--shadow-dock);
}
.k-dock[data-tenant=roger]{width:min(var(--dock-width-roger),100vw)}
.k-dock[data-tenant=work]{--k-pad:var(--space-5)}
.k-dock-handle{display:none}
.k-dock[data-docked]{box-shadow:none}
.k-dock-top{position:relative;display:flex;align-items:center;gap:calc(var(--space-1) * 1.5);flex:0 0 auto;min-height:var(--space-16);padding:0 var(--space-3) 0 var(--k-pad)}
.k-dock-kicker{flex:1 1 auto;min-width:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-dock-top>.k-dock-title{flex:1 1 auto;min-width:0}
.k-dock-top>.k-dock-title+.k-dock-kicker{flex:0 1 auto}
.k-dock[data-tenant=roger] .k-dock-top>.k-dock-title{flex:0 0 auto}
.k-dock[data-tenant=roger] .k-dock-top>.k-dock-title+.k-dock-kicker{flex:1 1 auto}
.k-dock-tools{display:flex;align-items:center;gap:var(--space-2)}
.k-dock-back{display:inline-flex;align-items:center;gap:var(--space-1);flex:0 0 auto;height:var(--icon-target-sm);margin:0 0 0 calc(var(--space-2) * -1);padding:0 var(--space-2) 0 var(--space-1);border:0;border-radius:var(--radius-s);background:none;color:var(--ink);font:var(--weight-medium) var(--text-s)/1 var(--font-brand);cursor:pointer}
.k-dock-back:hover{background:var(--plate)}
.k-dock-back>.br-icon{width:var(--icon-size-s);height:var(--icon-size-s)}
.k-dock-pager{font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
.k-dock-body{flex:1 1 auto;min-height:0;padding:0 var(--k-pad) var(--space-8);overflow-y:auto;overscroll-behavior:contain;font-size:var(--text-s);line-height:var(--leading-normal)}
.k-dock-title{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--ink);font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
.k-dock-title:focus{outline:0}
.k-dock-title>.k-editable{flex:1 1 auto}
.k-dock[data-tenant=roger] .k-dock-title{font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:0}
.k-dock-status{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.k-dock-status-word{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
.k-dock-section{margin-top:var(--space-6)}
.k-dock-section-head{display:flex;align-items:center;gap:var(--space-2);margin:0 0 calc(var(--space-1) * 1.5);padding-bottom:var(--space-1);border-bottom:1px solid var(--line-soft)}
.k-dock-section-head>.k-dock-label{margin:0}
.k-dock-label{display:flex;align-items:center;gap:var(--space-2);margin:0 0 calc(var(--space-1) * 1.5);font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-normal);letter-spacing:0;color:var(--muted)}
.k-dock-note{margin-left:auto;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted)}
/* An editable note (the shared Due) ends on the column's edge; its pencil space reaches into the dock's gutter. */
.k-dock-note>.k-editable[data-compact]{margin-right:calc(min(var(--space-6),var(--k-pad)) * -1)}
.k-dock-body .k-plate{margin-top:var(--space-6);padding:var(--space-4) var(--space-5)}
.k-dock-body .k-plate[data-flush]{margin-inline:calc((var(--k-pad) - var(--space-4)) * -1);padding-inline:calc(var(--k-pad) - var(--space-4))}
.k-toast{
  --focus-ring:var(--tip-ink);position:fixed;left:50%;bottom:var(--space-6);z-index:var(--z-toast);display:flex;align-items:center;gap:var(--space-4);max-width:calc(100vw - var(--space-8));
  min-height:var(--control);padding:0 var(--space-2) 0 var(--space-5);border-radius:var(--radius-m);background:var(--tip);color:var(--tip-ink);
  font:var(--weight-medium) var(--text-s)/var(--leading-snug) var(--font-brand);letter-spacing:0;transform:translateX(-50%);animation:k-toast-in var(--motion-enter) var(--ease-rise);
}
.k-toast-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-toast-action{display:inline-grid;place-items:center;flex:0 0 auto;width:var(--control-sm);height:var(--control-sm);margin:0;padding:0;border:0;border-radius:var(--radius-s);background:transparent;color:var(--accent-on-ink);font:inherit;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-rise)}
.k-toast-action:hover{background:var(--hover-on-ink)}
@keyframes k-toast-in{from{opacity:0;transform:translate(-50%,var(--space-2))}to{opacity:1;transform:translate(-50%,0)}}

/* Breakpoints: below 1100 there is no sidebar and every dock tenant overlays; at 700 and below (phones)
   fields take 16 px text, Display drops to 32, cards stack, overlays become bottom sheets, and a hero
   stage line that was not swapped for the vertical one keeps only its now label. */
@media (width < 1100px){
  .k-facts-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-dock{box-shadow:var(--shadow-float)}
}
@media (width <= 700px){
  .k-t-display{font-size:var(--text-2xl);line-height:var(--leading-tightest)}
  /* On a phone the bar scrolls away with the page: its tools may wrap to two lines, and reading room comes first. */
  .k-page-header[data-bar]{position:static;margin-block:0;padding-block:0;border-image:none;animation-name:none}
  main:has(.k-page-header[data-bar]){--k-bar-end:calc(var(--space-8) * -1);scroll-padding-top:0}
  /* Page actions that hold a segmented control take their own line from the 16 px edge, never right-ragged. */
  .k-page-header-tools:has(>.k-seg){flex:1 1 100%;flex-wrap:wrap;margin-left:0}
  /* Tools that wrap under the H1 start at the page's left edge (16 px), never a ragged right-aligned row. */
  .k-page-header-tools:has(>.k-seg){justify-content:flex-start}
  .k-page-header-tools:has(>.k-seg)>.k-btn:first-of-type{margin-left:0}
  .k-field-input,.k-field[data-size=l] .k-field-input{font-size:var(--text-m)}
  .k-tile{--k-pad-x:var(--space-5);padding:var(--space-5) var(--k-pad-x)}
  .k-next{--k-pad-x:var(--space-5)}
  .k-facts-cols{grid-template-columns:minmax(0,1fr)}
  .k-split-row{grid-template-columns:minmax(0,1fr);row-gap:var(--space-1)}
  /* Facts table: the label stacks above its value, the status dot stays beside it (no narrow value column). */
  .k-facts,.k-facts>tbody{display:block}
  .k-facts tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line-soft)}
  .k-facts :is(.k-facts-label,.k-facts-value,.k-facts-status){padding:0;border-top:0}
  .k-facts-label{grid-column:1;width:auto;padding-bottom:var(--space-1)}
  .k-facts-value{grid-column:1}
  .k-facts-status{grid-column:2;grid-row:1 / span 2;width:auto;align-self:center}
  /* A dense table stays one line per fact: the label beside its value, in a narrower column, no hairlines. */
  .k-facts[data-dense] tr{grid-template-columns:var(--space-24) minmax(0,1fr) auto;align-items:center;min-height:var(--space-10);padding:0;border-top:0}
  .k-facts[data-dense] :is(.k-facts-label,.k-facts-value,.k-facts-status){height:auto}
  .k-facts[data-dense] .k-facts-label{grid-column:1;padding:0 var(--space-3) 0 0}
  .k-facts[data-dense] .k-facts-value{grid-column:2}
  .k-facts[data-dense] .k-facts-status{grid-column:3;grid-row:auto}
  /* Inline path: when it wraps, a connector would start the second line on its own; the nodes keep their order. */
  .k-path[data-size=inline] .k-stage+.k-stage::before{display:none}
  .k-path[data-size=inline] .k-path-stages{column-gap:var(--space-5)}
  .k-section[data-chapter] .k-section-title{min-width:0}
  .k-next[data-variant=card]{display:block;padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5)}
  .k-next[data-variant=card] .k-next-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);margin:var(--space-4) 0 0}
  .k-next[data-variant=card] .k-next-actions>.k-btn{grid-column:1 / -1;order:-1;width:100%}
  .k-next[data-variant=card] .k-next-roger{justify-self:start;padding:0}
  .k-next[data-variant=bar]{flex-wrap:wrap;row-gap:var(--space-1);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4)}
  .k-next[data-variant=bar] .k-next-actions{flex-basis:100%;margin-left:0;padding-left:0}
  .k-path[data-size=hero] .k-stage:not([data-state=now],.k-stage-end) :is(.k-stage-label,.k-stage-meta){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .k-path[data-size=hero] .k-stage[data-state=now] .k-stage-link{width:max-content;max-width:var(--path-meta-width)}
  /* A hero closed by an end (the Overview's Live) keeps only the end on a phone, as one line: the vertical line
     carries the stages there. */
  .k-path[data-size=hero][data-end] :is(.k-path-time,.k-stage:not(.k-stage-end),.k-stage-end>.k-stage-node){display:none}
  .k-path[data-size=hero][data-end] .k-path-stages{display:block}
  .k-path[data-size=hero][data-end] .k-stage-end{flex-flow:row wrap;align-items:baseline;gap:0 var(--space-2)}
  .k-path[data-size=hero][data-end] .k-stage-end>.k-stage-label{margin-top:0}
  .k-row-title,.k-row-meta{white-space:normal;text-overflow:clip}
  /* An inline row stacks: the title, the person or value it names, then its meta ("Waiting for Mara"). */
  .k-row[data-inline] .k-row-meta{order:2}
  .k-row[data-inline] .k-row-main{grid-template-columns:minmax(0,1fr)}
  .k-row[data-inline] :is(.k-row-title,.k-row-meta,.k-row-detail),.k-row[data-inline] .k-row-main:has(.k-row-detail) .k-row-meta{grid-column:1;grid-row:auto}
  .k-dialog{inset:auto 0 0 0;width:auto;max-width:none;max-height:90dvh;margin:0;border-radius:var(--radius-l) var(--radius-l) 0 0}
  .k-dock,.k-dock[data-tenant=roger]{top:auto;left:0;right:0;width:auto;height:90dvh;border-left:0;border-radius:var(--radius-l) var(--radius-l) 0 0}
  .k-dock-handle{position:absolute;top:0;left:50%;z-index:1;display:block;width:var(--space-16);height:var(--space-6);margin:0;padding:0;border:0;border-radius:var(--radius-s);background:none;transform:translateX(-50%);cursor:pointer}
  .k-dock-handle::before{content:'';position:absolute;top:var(--space-2);left:50%;width:var(--space-10);height:var(--space-1);border-radius:var(--radius-full);background:var(--line);transform:translateX(-50%)}
  .k-dock,.k-dock[data-tenant=work]{--k-pad:var(--space-4)}
  /* The More index stays one line on phones (Creative ask · Scope · Practicalities · Guardrails), scrolling
     sideways rather than wrapping an item under the label. */
  .k-more-row{flex-wrap:nowrap;gap:var(--space-4);overflow-x:auto;scrollbar-width:none;padding-right:var(--space-6);mask-image:linear-gradient(90deg,var(--ink) calc(100% - var(--space-6)),transparent)}
  .k-more-row>*{flex:0 0 auto}
  .k-toast{bottom:var(--space-4)}
}
@media (width >= 1440px){
  .k-dock[data-tenant=roger][data-docked]{border-left-color:var(--line-soft)}
}
@media (prefers-reduced-motion:reduce){
  .k-stage-walk,.k-stage-node,.k-row-chevron>.br-icon,.k-section-tools>.k-icon-btn>.br-icon,.k-check-input[role=switch],.k-check-input[role=switch]::before,.k-check-input[role=switch]::after{transition:none}
  .k-toast{animation-name:k-toast-fade}
  :is(.k-btn,.k-icon-btn):active:not(:disabled,[aria-disabled=true]){transform:none}
  .text-button:active:not(:disabled),:is(.k-more-item,.k-next-more,.k-split-link):active{transform:none}
}
@keyframes k-toast-fade{from{opacity:0}to{opacity:1}}
/* Paper (the Leadership PDF): one even rhythm of 32 between a page's blocks, the header's included; a row never
   splits across pages and a section's head stays with its body; a row's ›, which says it opens, stays on screen.
   The page bar lies flat in the flow and the page's sr-only H1 prints as its title. */
@media print{
  .k-flow>*+*,.k-flow>.k-page-header+*{margin-top:var(--space-8)}
  .k-row{break-inside:avoid}
  .k-section-head{break-after:avoid}
  .k-row-chevron{display:none}
  /* Paper keeps the words, not the controls: every fold open, no Add stubs, no pencils (the Brief's PDF). */
  [data-fold][data-clipped] :is(.k-editable-value,.k-fold-text){max-height:none;mask-image:none}
  .k-fold-toggle,.k-stub,.k-editable-edit{display:none}
  .k-page-header[data-bar]{position:static;margin-block:0;padding-block:0;border-image:none;animation-name:none}
  .k-page-title.sr-only{position:static;width:auto;height:auto;margin:0 0 var(--space-2);overflow:visible;clip:auto;white-space:normal;color:var(--ink);font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
}

/* Budget (budget-views.js): the split as one quiet bar, production · media · operations · events, with what is not split
   yet as a dashed rest; a spend meter that turns to the alert ink when an estimate runs over. Widths arrive as
   --k-share (kit.js applyKitGeometry). The parts keep the plan's tones: sepia, mint, orange, stone. */
.budget-bar{display:flex;width:100%;height:var(--space-2);overflow:hidden;border-radius:var(--radius-full);background:var(--line-soft)}
.budget-seg{flex:none;width:var(--k-share,0);height:100%}
.budget-seg+.budget-seg{box-shadow:inset 2px 0 0 var(--page)}
.budget-seg[data-part="production"],.budget-swatch[data-part="production"]{background:var(--tone-1-line)}
.budget-seg[data-part="media"],.budget-swatch[data-part="media"]{background:var(--tone-0-line)}
.budget-seg[data-part="operations"],.budget-swatch[data-part="operations"]{background:var(--tone-2-line)}
.budget-seg[data-part="events"],.budget-swatch[data-part="events"]{background:var(--tone-3-line)}
.budget-seg[data-part="rest"]{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px)}
/* Over the target: a tick where the target falls, the overrun past it in the alert ink. */
.budget-bar[data-over="true"]{position:relative;overflow:visible}
.budget-bar[data-over="true"] .budget-seg:first-child{border-radius:var(--radius-full) 0 0 var(--radius-full)}
.budget-bar[data-over="true"] .budget-seg:nth-last-child(2){border-radius:0 var(--radius-full) var(--radius-full) 0}
.budget-target{position:absolute;inset:calc(var(--space-1) * -1) auto calc(var(--space-1) * -1) 0;width:var(--k-share,0);border-right:2px solid var(--ink-alert);pointer-events:none}
.budget-swatch{display:inline-block;flex:none;width:var(--dot);height:var(--dot);border-radius:var(--radius-full)}
.budget-legend{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4)}
.budget-key{display:inline-flex;align-items:center;gap:var(--space-1)}
.budget-share{color:var(--muted)}
.budget-amount{font-variant-numeric:tabular-nums;white-space:nowrap}
.budget-key .budget-amount,.budget-meter-words{font-size:var(--text-xs)}
.budget-meter{display:inline-flex;align-items:center;gap:var(--space-2)}
.budget-meter-line{display:block;width:var(--space-24);height:var(--space-1);overflow:hidden;border-radius:var(--radius-full);background:var(--line-soft)}
.budget-meter-line i{display:block;width:var(--k-share,0);height:100%;background:var(--ink)}
.budget-meter[data-over="true"] .budget-meter-line i{background:var(--ink-alert)}
.budget-over{color:var(--ink-alert-text)}

/* Term (kit.term): a word with a plain meaning on hover, focus or tap. At rest it is plain text (16 Oct 2026: an
   underline on every label read as noise); pointing at or focusing its row (or its own container) shows a faint
   dotted underline, and the word itself firms it up. The tooltip works the same either way. */
.k-term{text-decoration:underline dotted transparent;text-decoration-thickness:1px;text-underline-offset:.25em;cursor:help}
:is(tr,.k-split-row,.k-fact,.k-section-head,.k-legend-item):is(:hover,:focus-within) .k-term,:hover>.k-term{text-decoration-color:var(--line-control)}
.k-term:is(:hover,:focus-visible){text-decoration-color:currentColor}