/* TangleKite Lantern skin for the Blazor frontend.
   Ported from docs/design-system/components.css (same section numbers) for the vendored Bootstrap 5.1.
   Loads after bootstrap.min.css and lantern/tokens.css. Section 14 (overlay) is ported only in part,
   for the static home page example.
   Section 16 holds the Bootstrap 5.1 rules the reference skin never had to beat. */

/* ============ 0a. Fonts (self-hosted, no third-party request) ============ */
@font-face{font-family:"Bowlby One";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/BowlbyOne-Regular-latin.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/WorkSans-Variable-latin.woff2") format("woff2")}

/* ============ 0b. Bootstrap 5.1 root variables -> Lantern dark tokens ============
   Triplets are the dark token values as numbers; update them if tokens.json changes. */
:root{
  --bs-body-bg:var(--body-bg);                 /* body-bg */
  --bs-body-color:var(--body-color);           /* body-color */
  --bs-body-rgb:246,235,228;                   /* body-color #f6ebe4 */
  --bs-body-font-family:var(--font-sans);
  --bs-font-sans-serif:var(--font-sans);
  --bs-font-monospace:var(--font-mono);
  --bs-primary:var(--primary);--bs-primary-rgb:242,184,75;        /* primary #f2b84b */
  --bs-secondary:var(--secondary);--bs-secondary-rgb:217,199,192; /* secondary #d9c7c0 */
  --bs-success:var(--success);--bs-success-rgb:143,214,148;       /* success #8fd694 */
  --bs-warning:var(--warning);--bs-warning-rgb:255,159,90;        /* warning #ff9f5a */
  --bs-danger:var(--danger);--bs-danger-rgb:255,123,114;          /* danger #ff7b72 */
  --bs-info:var(--info);--bs-info-rgb:142,197,232;                /* info #8ec5e8 */
  --bs-dark:var(--ink);--bs-dark-rgb:28,18,24;                    /* ink #1c1218 */
  --bs-light:var(--surface-raised);--bs-light-rgb:255,250,245;    /* surface-raised #fffaf5 */
}


/* ============ 1. Contexts: ground, paper surface, ink stage ============ */
:root,.tk-ground{
  --tk-fg:var(--body-color);--tk-muted:var(--secondary-color);--tk-line:var(--border-color);--tk-divider:var(--border-subtle);
  --tk-shadow:var(--shadow-color);--tk-hover:var(--tertiary-bg);--tk-link:var(--link-color);--tk-link-hover:var(--link-hover-color);
  --tk-slash:var(--wordmark-slash);
  --tk-primary-text:var(--primary-text);--tk-success-text:var(--success-text);--tk-warning-text:var(--warning-text);
  --tk-danger-text:var(--danger-text);--tk-info-text:var(--info-text);
}
.tk-surface,.card,.alert,.modal-content,.dropdown-menu,.tk-hero{
  --tk-fg:var(--on-surface);--tk-muted:var(--on-surface-muted);--tk-line:var(--surface-border);--tk-divider:var(--surface-divider);
  --tk-shadow:var(--surface-border);--tk-hover:var(--surface-sunken);--tk-link:var(--surface-link-color);--tk-link-hover:var(--on-surface);
  --tk-slash:var(--wordmark-slash-on-surface);
  --tk-primary-text:var(--primary-text-emphasis);--tk-success-text:var(--success-text-emphasis);--tk-warning-text:var(--warning-text-emphasis);
  --tk-danger-text:var(--danger-text-emphasis);--tk-info-text:var(--info-text-emphasis);
  background-color:var(--surface);color:var(--tk-fg);
}
.tk-stage{
  --tk-fg:var(--on-ink);--tk-muted:var(--on-ink-muted);--tk-line:var(--on-ink);--tk-divider:var(--border-subtle);
  --tk-shadow:var(--on-ink);--tk-hover:var(--tertiary-bg);--tk-link:var(--amber);--tk-link-hover:var(--on-ink);--tk-slash:var(--amber);
  background-color:var(--ink);color:var(--on-ink);border:var(--border-width) solid var(--ink);border-radius:var(--radius);padding:var(--space-3);
}

/* ============ 2. Base ============ */
body{margin:0;background-color:var(--body-bg);color:var(--tk-fg);font-family:var(--font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.display-4,.display-5,.display-6,.card-title,.modal-title{font-family:var(--font-display);font-weight:400;line-height:1.15;margin:0 0 var(--space-3);color:var(--tk-fg)}
.display-4{font-size:56px;line-height:1.1}
h1,.h1,.display-5{font-size:40px;line-height:1.14}
h2,.h2,.display-6{font-size:30px}
h3,.h3{font-size:24px;line-height:1.2}
h4,.h4,.card-title,.modal-title{font-size:20px;line-height:1.2}
h5,.h5,h6,.h6{font-family:var(--font-sans);font-weight:700;line-height:1.3;margin:0 0 var(--space-2);color:var(--tk-fg)}
h5,.h5{font-size:17px}
h6,.h6{font-size:14px}
p{margin:0 0 var(--space-4)}
.lead{font-size:20px;line-height:1.5;font-weight:400}
.small,small{font-size:14px;line-height:1.5}
.fw-bold{font-weight:700}
.fw-semibold{font-weight:600}
.font-monospace,code{font-family:var(--font-mono);font-size:14px}
.text-muted,.text-body-secondary{color:var(--tk-muted)}
.text-light,.text-white,.text-dark,.text-body-emphasis{color:var(--tk-fg)}
.text-primary{color:var(--tk-primary-text)}
.text-success{color:var(--tk-success-text)}
.text-warning{color:var(--tk-warning-text)}
.text-danger{color:var(--tk-danger-text)}
.text-info{color:var(--tk-info-text)}
.tk-highlight{font-style:normal;background-color:var(--primary);color:var(--on-primary);padding:0 .22em;border-radius:var(--radius-sm);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tk-icon{width:1em;height:1em;flex:none;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

/* ============ 3. Links ============ */
a{color:var(--tk-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--tk-link-hover)}

/* ============ 4. Wordmark ============ */
.tk-wordmark{display:inline-block;font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;color:var(--tk-fg);text-decoration:none}
a.tk-wordmark:hover{color:var(--tk-fg)}
.tk-wordmark__slash{color:var(--tk-slash);padding:0 1px}
.tk-wordmark__img{display:block;height:18px;width:auto;flex-shrink:0}
.tk-wordmark--sm{font-size:16px}
.tk-wordmark--lg{font-size:44px}
.tk-mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-family:var(--font-display);font-size:15px;line-height:1;letter-spacing:.02em;background-color:var(--primary);color:var(--on-primary);border:var(--border-width) solid var(--ink);border-radius:var(--radius);box-shadow:var(--elevation-1) var(--elevation-1) 0 var(--tk-shadow)}

/* ============ 5. Buttons ============ */
.btn{--tk-btn-bg:var(--surface-raised);--tk-btn-fg:var(--on-surface);--tk-btn-off:var(--elevation-2);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:700;font-size:15px;line-height:1.2;
  padding:10px 16px;border:var(--border-width) solid var(--ink);border-radius:var(--radius);background-color:var(--tk-btn-bg);color:var(--tk-btn-fg);
  --tk-sh:var(--tk-btn-off) var(--tk-btn-off) 0 var(--tk-shadow);box-shadow:var(--tk-sh);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.btn:hover{color:var(--tk-btn-fg);transform:translate(-1px,-1px);--tk-sh:calc(var(--tk-btn-off) + 1px) calc(var(--tk-btn-off) + 1px) 0 var(--tk-shadow);box-shadow:var(--tk-sh)}
.btn:active{transform:translate(var(--tk-btn-off),var(--tk-btn-off));--tk-sh:0 0 0 var(--tk-shadow);box-shadow:var(--tk-sh)}
.btn-primary{--tk-btn-bg:var(--primary);--tk-btn-fg:var(--on-primary)}
.btn-secondary{--tk-btn-bg:var(--secondary);--tk-btn-fg:var(--on-status)}
.btn-success{--tk-btn-bg:var(--success);--tk-btn-fg:var(--on-status)}
.btn-warning{--tk-btn-bg:var(--warning);--tk-btn-fg:var(--on-status)}
.btn-danger{--tk-btn-bg:var(--danger);--tk-btn-fg:var(--on-status)}
.btn-info{--tk-btn-bg:var(--info);--tk-btn-fg:var(--on-status)}
.btn-light{--tk-btn-bg:var(--surface-raised);--tk-btn-fg:var(--on-surface)}
.btn-dark{--tk-btn-bg:var(--ink);--tk-btn-fg:var(--on-ink);border-color:var(--tk-line)}
[class*="btn-outline-"]{--tk-btn-bg:transparent;--tk-btn-fg:var(--tk-fg);--tk-btn-accent:var(--tk-divider);border-color:var(--tk-line);--tk-sh:var(--elevation-1) var(--elevation-1) 0 var(--tk-btn-accent);box-shadow:var(--tk-sh)}
[class*="btn-outline-"]:hover{background-color:var(--tk-hover);--tk-sh:var(--elevation-2) var(--elevation-2) 0 var(--tk-btn-accent);box-shadow:var(--tk-sh)}
.btn-outline-primary{--tk-btn-accent:var(--primary)}
.btn-outline-success{--tk-btn-accent:var(--success)}
.btn-outline-warning{--tk-btn-accent:var(--warning)}
.btn-outline-danger{--tk-btn-accent:var(--danger)}
.btn-outline-info{--tk-btn-accent:var(--info)}
.btn-outline-light{--tk-btn-accent:var(--tk-line)}
.btn-sm{--tk-btn-off:var(--elevation-1);font-size:13px;padding:6px 11px}
.btn-lg{font-size:17px;padding:14px 22px}
.btn:disabled,.btn.disabled{background-color:var(--disabled-bg);color:var(--disabled-color);border-color:var(--disabled-color);--tk-sh:none;box-shadow:none;transform:none;cursor:not-allowed}
.btn-link{background:none;border-color:transparent;--tk-sh:none;box-shadow:none;color:var(--tk-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;padding-left:0;padding-right:0}
.btn-link:hover{--tk-sh:none;box-shadow:none;transform:none;color:var(--tk-link-hover)}
.btn-close{box-sizing:border-box;background-image:none;opacity:1;width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:var(--border-width-thin) solid var(--tk-line);border-radius:var(--radius-sm);color:var(--tk-fg);cursor:pointer;font:700 18px/1 var(--font-sans)}
.btn-close::before{content:"\00d7"}
.btn-close:hover{background-color:var(--tk-hover)}
.btn-group{display:inline-flex;border-radius:var(--radius);box-shadow:var(--elevation-1) var(--elevation-1) 0 var(--tk-shadow)}
.btn-group>.btn{--tk-sh:none;box-shadow:none;transform:none;border-radius:0;margin-left:calc(var(--border-width) * -1)}
.btn-group>.btn:first-of-type{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);margin-left:0}
.btn-group>.btn:last-of-type{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.btn-check{position:absolute;opacity:0;pointer-events:none}
.btn-check:checked+.btn{background-color:var(--primary);color:var(--on-primary);border-color:var(--ink)}
.btn-check:focus-visible+.btn{outline:3px solid var(--focus-ring);outline-offset:3px;z-index:1}
.dropdown-menu{min-width:200px;margin:var(--space-2) 0 0;padding:var(--space-1);list-style:none;border:var(--border-width) solid var(--tk-line);border-radius:var(--radius);box-shadow:var(--elevation-2) var(--elevation-2) 0 var(--tk-shadow)}
.dropdown-item{display:block;width:100%;padding:8px 12px;border:0;border-radius:var(--radius-sm);background:none;color:var(--tk-fg);font:600 14px/1.3 var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.dropdown-item:hover{background-color:var(--primary-bg-subtle);color:var(--tk-fg)}

/* ============ 6. Navigation ============ */
.tk-navbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-4) 0;border-bottom:var(--border-width) solid var(--tk-line)}
.tk-navbar>.tk-wordmark{margin-right:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin:0;padding:0;list-style:none}
.nav-item form{margin:0}
.nav-link{display:block;padding:7px 13px;border:var(--border-width) solid transparent;border-radius:var(--radius);background:none;color:var(--tk-fg);font:600 15px/1.2 var(--font-sans);text-decoration:none;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out)}
.nav-link:hover{color:var(--tk-fg);border-color:var(--tk-line)}
.nav-pills .nav-link.active,.nav-link.active{background-color:var(--primary);color:var(--on-primary);border-color:var(--ink);box-shadow:var(--elevation-1) var(--elevation-1) 0 var(--tk-shadow)}

/* ============ 7. Cards and hero ============ */
.card{display:flex;flex-direction:column;min-width:0;border:var(--border-width) solid var(--tk-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.card-header{padding:14px var(--space-4);border-bottom:var(--border-width) solid var(--tk-line);background-color:var(--surface-sunken);border-radius:calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width)) 0 0;font-weight:700}
.card-body{padding:var(--space-4);flex:1 1 auto}
.card-footer{padding:var(--space-3) var(--space-4);border-top:1px solid var(--tk-divider)}
.card-text{margin:0 0 var(--space-3)}
.card-title{margin-bottom:var(--space-1)}
.card.border-primary{box-shadow:var(--elevation-3) var(--elevation-3) 0 var(--primary)}
.card.border-success{box-shadow:var(--elevation-3) var(--elevation-3) 0 var(--success)}
.card.border-warning{box-shadow:var(--elevation-3) var(--elevation-3) 0 var(--warning)}
.card.border-danger{box-shadow:var(--elevation-3) var(--elevation-3) 0 var(--danger)}
.card.border-info{box-shadow:var(--elevation-3) var(--elevation-3) 0 var(--info)}
.card.border-primary>.card-header{background-color:var(--primary-bg-subtle)}
.card.border-success>.card-header{background-color:var(--success-bg-subtle)}
.card.border-warning>.card-header{background-color:var(--warning-bg-subtle)}
.card.border-danger>.card-header{background-color:var(--danger-bg-subtle)}
.card.border-info>.card-header{background-color:var(--info-bg-subtle)}
.tk-card-flat{box-shadow:none}
.tk-tile{background-color:var(--surface-sunken);border:var(--border-width-thin) solid var(--tk-divider);border-radius:var(--radius)}
.tk-hero{border:var(--border-width) solid var(--tk-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-hero);padding:var(--space-5)}
.tk-hero__text{container-type:inline-size}
/* Two lines that always fit: "a life of its own." plus highlight padding is 10.21em of Bowlby One; 9.3cqi leaves ~5% spare for kerning and the fallback font. */
.tk-hero__title{font-size:56px;font-size:min(56px,9.3cqi);line-height:1.1;margin-bottom:var(--space-4)}
.tk-hero__line{display:block;white-space:nowrap}
@media (max-width:575.98px){.tk-hero{padding:var(--space-3)}.tk-hero__title{line-height:1.3}}
.tk-icon-square{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;font-size:22px;background-color:var(--primary);color:var(--on-primary);border:var(--border-width) solid var(--ink);border-radius:var(--radius);box-shadow:var(--elevation-1) var(--elevation-1) 0 var(--tk-shadow)}

/* ============ 8. Alerts and banners ============ */
.alert{position:relative;margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--tk-line);border-radius:var(--radius);box-shadow:var(--elevation-2) var(--elevation-2) 0 var(--tk-alert,var(--secondary))}
.alert-heading{font-family:var(--font-sans);font-weight:700;font-size:16px;margin:0 0 var(--space-1)}
.alert-primary{--tk-alert:var(--primary);background-color:var(--primary-bg-subtle)}
.alert-success{--tk-alert:var(--success);background-color:var(--success-bg-subtle)}
.alert-warning{--tk-alert:var(--warning);background-color:var(--warning-bg-subtle)}
.alert-danger{--tk-alert:var(--danger);background-color:var(--danger-bg-subtle)}
.alert-info{--tk-alert:var(--info);background-color:var(--info-bg-subtle)}
.alert-secondary{--tk-alert:var(--secondary);background-color:var(--surface-sunken)}
.alert-dismissible{padding-right:56px}
.alert-dismissible .btn-close{position:absolute;top:10px;right:10px}
.tk-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-3) var(--space-4);background-color:var(--tk-banner,var(--info));color:var(--on-status);border-bottom:var(--border-width) solid var(--ink);font-weight:600}
.tk-banner a{color:var(--on-status)}
.tk-banner--success{--tk-banner:var(--success)}
.tk-banner--warning{--tk-banner:var(--warning)}
.tk-banner--danger{--tk-banner:var(--danger)}
.tk-banner .btn{--tk-shadow:var(--ink);margin-left:auto}

/* ============ 9. Badges ============ */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px 8px;border:var(--border-width-thin) solid var(--ink);border-radius:var(--radius-sm);background-color:var(--surface-raised);color:var(--on-surface);font:700 12px/1.2 var(--font-sans);white-space:nowrap;vertical-align:middle}
.badge.rounded-pill{border-radius:var(--radius-pill);padding-left:10px;padding-right:10px}
.badge.bg-primary{background-color:var(--primary);color:var(--on-primary)}
.badge.bg-secondary{background-color:var(--secondary);color:var(--on-status)}
.badge.bg-success{background-color:var(--success);color:var(--on-status)}
.badge.bg-warning{background-color:var(--warning);color:var(--on-status)}
.badge.bg-danger{background-color:var(--danger);color:var(--on-status)}
.badge.bg-info{background-color:var(--info);color:var(--on-status)}
.badge.bg-light{background-color:var(--surface-raised);color:var(--on-surface)}
.badge.bg-dark{background-color:var(--ink);color:var(--on-ink);border-color:var(--tk-line)}

/* ============ 10. Forms ============ */
.form-label{display:block;margin:0 0 6px;font-weight:700;font-size:14px;color:var(--tk-fg)}
.form-control,.form-select{display:block;width:100%;min-width:0;padding:10px 12px;font:500 15px/1.3 var(--font-sans);color:var(--field-color);background-color:var(--field-bg);border:var(--border-width) solid var(--tk-line);border-radius:var(--radius);appearance:none;-webkit-appearance:none}
.form-control::placeholder{color:var(--field-placeholder);opacity:1}
.form-control:focus,.form-select:focus{outline:3px solid var(--focus-ring);outline-offset:2px}
.form-control:disabled,.form-select:disabled,.form-control[readonly]{background-color:var(--disabled-bg);color:var(--disabled-color)}
.form-control[readonly]{background-color:var(--surface-sunken);color:var(--on-surface)}
textarea.form-control{min-height:96px;resize:vertical}
.form-select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231c1218' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}
.form-text{margin-top:6px;font-size:13px;line-height:1.45;color:var(--tk-muted)}
.form-control.is-invalid,.form-select.is-invalid{box-shadow:var(--elevation-1) var(--elevation-1) 0 var(--danger)}
.invalid-feedback{margin-top:6px;font-size:13px;font-weight:600;color:var(--tk-danger-text)}
.form-check{padding-left:0;min-height:0;display:flex;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-2)}
.form-check-label{font-size:15px;color:var(--tk-fg)}
.form-check-input{flex:none;width:22px;height:22px;margin:1px 0 0;appearance:none;-webkit-appearance:none;background-color:var(--field-bg);border:var(--border-width) solid var(--tk-line);border-radius:var(--radius-sm);cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:14px}
.form-check-input[type="radio"]{border-radius:var(--radius-pill)}
.form-check-input:checked{background-color:var(--primary);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%231c1218' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form-check-input[type="radio"]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%231c1218'/%3E%3C/svg%3E")}
.form-switch .form-check-input{width:42px;border-radius:var(--radius-pill);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%231c1218'/%3E%3C/svg%3E");background-position:left 2px center;background-size:14px;transition:background-position var(--duration-base) var(--ease-out)}
.form-switch .form-check-input:checked{background-position:right 2px center}
.form-range{width:100%;height:22px;margin:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer}
.form-range::-webkit-slider-runnable-track{height:10px;background-color:var(--field-bg);border:var(--border-width-thin) solid var(--tk-line);border-radius:var(--radius-pill)}
.form-range::-moz-range-track{height:6px;background-color:var(--field-bg);border:var(--border-width-thin) solid var(--tk-line);border-radius:var(--radius-pill)}
.form-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;background-color:var(--primary);border:var(--border-width) solid var(--ink);border-radius:var(--radius-sm)}
.form-range::-moz-range-thumb{width:18px;height:18px;background-color:var(--primary);border:var(--border-width) solid var(--ink);border-radius:var(--radius-sm)}
.input-group{display:flex;align-items:stretch;width:100%}
.input-group>*{border-radius:0;margin-left:calc(var(--border-width) * -1)}
.input-group>:first-child{margin-left:0;border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}
.input-group>:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.input-group>.form-control{flex:1 1 auto;width:1%}
.input-group>.form-control:focus{position:relative;z-index:1}
.input-group-text{display:flex;align-items:center;padding:0 12px;font:600 14px/1 var(--font-sans);color:var(--on-surface);background-color:var(--input-addon-bg);border:var(--border-width) solid var(--tk-line);white-space:nowrap}
.input-group>.btn{--tk-sh:none;box-shadow:none;transform:none;border-color:var(--tk-line)}
.input-group>.btn:hover{background-color:var(--tk-hover);color:var(--tk-fg)}
.input-group>.btn-primary:hover{background-color:var(--primary);color:var(--on-primary)}

/* ============ 11. Tables ============ */
.table-responsive{overflow-x:auto}
.table{width:100%;margin:0;border-collapse:separate;border-spacing:0;color:var(--tk-fg);font-size:15px}
.table th{padding:10px 12px;text-align:left;font:700 12px/1.3 var(--font-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--tk-fg);border-bottom:var(--border-width) solid var(--tk-line);white-space:nowrap}
.table td{padding:11px 12px;border-bottom:1px solid var(--tk-divider);vertical-align:top}
.table tbody tr:last-child td{border-bottom:0}
.table-sm th,.table-sm td{padding:6px 10px;font-size:14px}
.table-hover tbody tr:hover td{background-color:var(--tk-hover)}
.table-striped tbody tr:nth-child(odd) td{background-color:var(--tk-hover)}
.table.align-middle td{vertical-align:middle}
.table .text-end{text-align:right}
thead.table-dark th{background-color:var(--ink);color:var(--on-ink)}
thead.table-light th{background-color:var(--surface-sunken);color:var(--on-surface)}

/* ============ 12. Modal ============ */
.modal-backdrop{background-color:var(--modal-backdrop)}
.modal-dialog{width:100%;max-width:520px;margin:var(--space-6) auto}
.modal-content{display:flex;flex-direction:column;border:var(--border-width) solid var(--tk-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal)}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);border-bottom:var(--border-width) solid var(--tk-line)}
.modal-title{margin:0}
.modal-body{padding:var(--space-4)}
.modal-body>:last-child{margin-bottom:0}
.modal-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-4)}

/* ============ 13. Loading and empty states ============ */
@keyframes tk-spin{to{transform:rotate(360deg)}}
@keyframes tk-pulse{50%{opacity:.45}}
.spinner-border{display:inline-block;width:28px;height:28px;flex:none;vertical-align:-.2em;border:4px solid var(--tk-divider);border-right-color:var(--tk-fg);border-radius:var(--radius-pill);animation:tk-spin .8s linear infinite}
.btn .spinner-border{border-color:transparent;border-right-color:currentColor;border-top-color:currentColor}
.spinner-border-sm{width:16px;height:16px;border-width:3px}
.placeholder{display:inline-block;min-height:1em;vertical-align:middle;background-color:var(--tk-divider);border-radius:var(--radius-sm);animation:tk-pulse 1.6s ease-in-out infinite}
.tk-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-4);text-align:center;color:var(--tk-muted);font-weight:600}
.tk-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-5);text-align:center;border:var(--border-width) dashed var(--tk-line);border-radius:var(--radius-lg)}
.tk-empty__title{font-family:var(--font-display);font-size:20px;line-height:1.2;color:var(--tk-fg);margin:var(--space-2) 0 0}
.tk-empty__text{color:var(--tk-muted);max-width:44ch;margin:0 0 var(--space-3)}

/* ============ 14. Overlay (static subset, for the home page example; no animation) ============ */
.tk-overlay{font-family:var(--font-sans);color:var(--overlay-message-color)}
.tk-cluster-slot{--tk-slot:var(--slot-1);display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:var(--space-3);border-radius:var(--radius-lg);background-color:var(--overlay-scrim);opacity:1}
.tk-cluster-slot[data-slot="2"]{--tk-slot:var(--slot-2)}
.tk-cluster-slot[data-slot="3"]{--tk-slot:var(--slot-3)}
.tk-cluster-slot[data-slot="4"]{--tk-slot:var(--slot-4)}
.tk-cluster-slot[data-slot="5"]{--tk-slot:var(--slot-5)}
.tk-cluster-slot[data-slot="6"]{--tk-slot:var(--slot-6)}
.tk-cluster-slot[data-slot="7"]{--tk-slot:var(--slot-7)}
.tk-cluster-slot[data-slot="8"]{--tk-slot:var(--slot-8)}
.tk-cluster-slot[data-slot="9"]{--tk-slot:var(--slot-9)}
.tk-cluster-slot[data-slot="10"]{--tk-slot:var(--slot-10)}
.tk-cluster-label{display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;margin-bottom:2px;padding:5px 5px 5px 12px;background-color:var(--tk-slot,var(--slot-1));color:var(--ink);border:var(--border-width) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-overlay);font-family:var(--font-display);font-size:20px;line-height:1}
.tk-cluster-label__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 0}
.tk-chat-message{max-width:100%;padding:5px 11px;background-color:var(--overlay-message-bg);color:var(--overlay-message-color);border:var(--border-width) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-overlay);font-family:var(--font-sans);font-size:20px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.tk-chat-message__user{font-weight:700;margin-right:5px}
.tk-overlay--compact .tk-chat-message{font-size:13px;padding:3px 8px;border-width:var(--border-width-thin);box-shadow:2px 2px 0 var(--ink)}
.tk-overlay--compact .tk-cluster-label{font-size:14px;padding:3px 3px 3px 9px;border-width:var(--border-width-thin);box-shadow:2px 2px 0 var(--ink)}
.tk-overlay--compact .tk-cluster-slot{padding:var(--space-2);gap:4px;border-radius:var(--radius)}

/* ============ 15. Legacy Bootstrap utilities, neutralised to the current context ============ */
.card.bg-dark,.card-body.bg-dark,.card-header.bg-dark{background-color:var(--surface)!important}
.form-control.bg-secondary,.input-group-text.bg-secondary{background-color:var(--field-bg)!important}
.input-group-text.bg-secondary{background-color:var(--input-addon-bg)!important}

/* ============ 16. Bootstrap 5.1 conflicts ============
   Rules Bootstrap applies with higher specificity or !important. */

/* 16.1 Buttons: states keep the Lantern fill and ink outline; focus is the outline only. */
.btn:hover,.btn:focus,.btn:active,.btn.active,.show>.btn.dropdown-toggle{background-color:var(--tk-btn-bg);border-color:var(--ink);color:var(--tk-btn-fg)}
.btn-dark:hover,.btn-dark:focus,.btn-dark:active,.btn-dark.active{border-color:var(--tk-line)}
.btn:focus,.btn:active:focus,.btn.active:focus,.btn-check:focus+.btn,.btn-check:checked+.btn:focus,.show>.btn.dropdown-toggle:focus{box-shadow:var(--tk-sh)!important}
.btn:focus{outline:0}
.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
[class*="btn-outline-"]:hover,[class*="btn-outline-"]:active,[class*="btn-outline-"].active,[class*="btn-outline-"].dropdown-toggle.show{background-color:var(--tk-hover);border-color:var(--tk-line);color:var(--tk-btn-fg)}
[class*="btn-outline-"]:focus{border-color:var(--tk-line);color:var(--tk-btn-fg)}
.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{background:none;border-color:transparent;--tk-sh:none;box-shadow:none!important}
.btn-link{color:var(--tk-link)}
.btn-link:hover,.btn-link:focus{color:var(--tk-link-hover)}
.btn:disabled,.btn.disabled,fieldset:disabled .btn{background-color:var(--disabled-bg);color:var(--disabled-color);border-color:var(--disabled-color);--tk-sh:none;box-shadow:none!important;opacity:1}
.btn-close:hover,.btn-close:focus{opacity:1;color:var(--tk-fg)}
.btn-close:focus{outline:0;box-shadow:none}
.btn-close:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.modal-header .btn-close,.alert-dismissible .btn-close{padding:0;margin:0}
.dropdown-item:focus{background-color:var(--primary-bg-subtle);color:var(--tk-fg)}

/* 16.2 Nav */
.nav-link:focus{color:var(--tk-fg)}
.nav-link.active:focus,.nav-link.active:hover{color:var(--on-primary)}

/* 16.3 Fields */
.form-control:focus,.form-select:focus{color:var(--field-color);background-color:var(--field-bg);border-color:var(--tk-line);box-shadow:none}
.form-control[readonly]:focus{background-color:var(--surface-sunken);color:var(--on-surface)}
.form-control:disabled:focus{background-color:var(--disabled-bg);color:var(--disabled-color)}
.form-check .form-check-input{float:none;margin-left:0}
.form-check-input[type="checkbox"]{border-radius:var(--radius-sm)}
.form-check-input:active{filter:none}
.form-check-input:focus{border-color:var(--tk-line);box-shadow:none;outline:0}
.form-check-input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.form-check-input:checked,.form-check-input:checked:focus{border-color:var(--ink)}
.form-check-input[type="checkbox"]:checked{background-color:var(--primary);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%231c1218' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form-switch .form-check-input,.form-switch .form-check-input:focus,.form-switch .form-check-input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%231c1218'/%3E%3C/svg%3E")}
.form-switch .form-check-input:focus:not(:checked){background-position:left 2px center}

/* 16.4 Tables: Bootstrap paints rows through variables and an inset box-shadow. */
.table{--bs-table-bg:transparent;--bs-table-accent-bg:transparent;--bs-table-striped-bg:var(--tk-hover);--bs-table-hover-bg:var(--tk-hover);--bs-table-hover-color:var(--tk-fg);--bs-table-striped-color:var(--tk-fg);color:var(--tk-fg);border-color:var(--tk-divider)}
.table>:not(caption)>*>*{border-color:var(--tk-divider)}
.table>thead>tr>th{border-color:var(--tk-line)}

/* 16.5 Text colour utilities: Bootstrap sets fixed colours with !important. */
.text-muted,.text-secondary,.text-body-secondary{color:var(--tk-muted)!important}
.text-light,.text-white,.text-dark,.text-black,.text-body,.text-body-emphasis{color:var(--tk-fg)!important}
.text-primary{color:var(--tk-primary-text)!important}
.text-success{color:var(--tk-success-text)!important}
.text-warning{color:var(--tk-warning-text)!important}
.text-danger{color:var(--tk-danger-text)!important}
.text-info{color:var(--tk-info-text)!important}
code{color:var(--tk-fg)}

/* 16.6 Borders: Bootstrap sets fixed colours with !important. Cards keep the ink outline; status shows as shadow and header tint. */
.border-primary,.border-secondary,.border-success,.border-info,.border-warning,.border-danger,.border-light,.border-dark,.border-white,
.card.border-primary,.card.border-secondary,.card.border-success,.card.border-info,.card.border-warning,.card.border-danger{border-color:var(--tk-line)!important}
.border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--tk-divider)!important}

/* 16.7 Display headings: Bowlby One has one weight. */
:is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,.display-4,.display-5,.display-6,.card-title,.modal-title).fw-bold{font-weight:400!important}
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.display-4,.display-5,.display-6,.card-title,.modal-title{font-weight:400}

/* 16.8 Cards, alerts, modals: Bootstrap's inner radii and fills */
.card-header:first-child{border-radius:calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width)) 0 0}
.card-footer{background-color:transparent}
.card-footer:last-child{border-radius:0 0 calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width))}
.alert .alert-link{color:var(--tk-link);font-weight:700}
.modal-header{border-radius:calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width)) 0 0}
.modal-footer{border-top:0;border-radius:0 0 calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width))}
.modal-footer>*{margin:0}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active{transition:none;transform:none}
  .spinner-border{animation-duration:2.4s}
  .placeholder,.tk-chat-message.is-entering{animation:none}
}