/*
Theme Name: Kaam Ase
Theme URI: https://kaamase.com
Author: Nagaland Me
Author URI: https://nagaland.me
Description: Hiring platform theme for Kaam Ase. Built for Nagaland. Mobile first, works on slow connections, no external fonts, no external requests. Presentation layer only. All data structures live in the kaamase-core plugin.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaamase
Tags: hiring, jobs, marketplace, mobile first, accessible
*/

/* ==========================================================================
   KAAM ASE DESIGN SYSTEM v1.0.0

   Rules this file follows and every later file must follow:

   1. No web fonts. System stack only. Saves about 100KB and one round trip
      on a 2G connection in a village.
   2. No external requests of any kind. No CDN, no analytics font, nothing.
   3. Everything in one stylesheet. Fewer requests beats smaller files on
      high latency networks.
   4. Minimum touch target is 48px. People tap this with wet or rough hands
      on a cracked screen.
   5. Contrast is high everywhere. This gets used outdoors in daylight.
   6. Nothing depends on colour alone. Every status has a shape or a word
      next to it, because some users will not read the label.
   7. Mobile is the design. Desktop is the adaptation.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {

  /* Brand
     Green is the hills and reads as go, available, working.
     Amber is the action colour, borrowed from work site visibility. */
  --ka-green-900: #06301b;
  --ka-green-800: #0b4527;
  --ka-green-700: #10603a;
  --ka-green-600: #157a4a;
  --ka-green-500: #1f9560;
  --ka-green-100: #dff0e6;
  --ka-green-50:  #f0f8f3;

  --ka-amber-700: #a35a06;
  --ka-amber-600: #c26e08;
  --ka-amber-500: #e8890b;
  --ka-amber-400: #f5a623;
  --ka-amber-100: #fdf0d9;
  --ka-amber-50:  #fef8ed;

  /* Neutrals are warm, not blue grey. Blue grey reads as corporate
     software. Warm reads as paper and dust. */
  --ka-ink-900: #17150f;
  --ka-ink-800: #2b2820;
  --ka-ink-700: #46423a;
  --ka-ink-600: #6b665c;
  --ka-ink-500: #8f8a80;
  --ka-ink-400: #b5b0a6;
  --ka-ink-300: #d8d4cb;
  --ka-ink-200: #e8e5de;
  --ka-ink-100: #f4f2ed;
  --ka-ink-50:  #faf9f6;
  --ka-white:   #ffffff;

  /* Status
     Used for availability, verification and job state. */
  --ka-live:      #0f8a3c;
  --ka-live-bg:   #e4f4e9;
  --ka-busy:      #c0392b;
  --ka-busy-bg:   #fbe9e7;
  --ka-leave:     #b7791f;
  --ka-leave-bg:  #fdf3e0;
  --ka-info:      #1d5f8a;
  --ka-info-bg:   #e6f0f7;

  /* Surface */
  --ka-bg:          var(--ka-ink-50);
  --ka-surface:     var(--ka-white);
  --ka-surface-alt: var(--ka-ink-100);
  --ka-border:      var(--ka-ink-200);
  --ka-border-firm: var(--ka-ink-300);

  /* Text */
  --ka-text:        var(--ka-ink-900);
  --ka-text-soft:   var(--ka-ink-700);
  --ka-text-mute:   var(--ka-ink-600);
  --ka-text-invert: var(--ka-white);

  /* Type
     System stack. Noto Sans is included because most Android devices in
     India ship with it and it covers Devanagari well for Hindi strings.
     Nothing is downloaded either way. */
  --ka-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ka-font-num: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* Type scale. Base is 16px and never smaller than 14px anywhere.
     Older eyes, cheap screens, bright sunlight. */
  --ka-text-xs:   0.8125rem;  /* 13px, badges only */
  --ka-text-sm:   0.875rem;   /* 14px, floor for body */
  --ka-text-base: 1rem;       /* 16px */
  --ka-text-lg:   1.125rem;   /* 18px */
  --ka-text-xl:   1.3125rem;  /* 21px */
  --ka-text-2xl:  1.625rem;   /* 26px */
  --ka-text-3xl:  2rem;       /* 32px */

  --ka-leading-tight: 1.2;
  --ka-leading-snug:  1.35;
  --ka-leading:       1.55;

  --ka-weight-normal: 400;
  --ka-weight-medium: 500;
  --ka-weight-bold:   700;

  /* Space. 4px base. */
  --ka-1:  0.25rem;
  --ka-2:  0.5rem;
  --ka-3:  0.75rem;
  --ka-4:  1rem;
  --ka-5:  1.25rem;
  --ka-6:  1.5rem;
  --ka-8:  2rem;
  --ka-10: 2.5rem;
  --ka-12: 3rem;
  --ka-16: 4rem;

  /* Shape */
  --ka-radius-sm:   6px;
  --ka-radius:      10px;
  --ka-radius-lg:   14px;
  --ka-radius-pill: 999px;

  /* Depth. Kept shallow. Heavy shadows look expensive and load slow
     on cheap GPUs. */
  --ka-shadow-sm: 0 1px 2px rgba(23, 21, 15, 0.07);
  --ka-shadow:    0 2px 6px rgba(23, 21, 15, 0.09);
  --ka-shadow-lg: 0 8px 24px rgba(23, 21, 15, 0.13);

  /* Controls */
  --ka-tap: 48px;          /* minimum touch target, never reduce */
  --ka-tap-lg: 56px;       /* primary actions */
  --ka-focus: 3px;

  /* Layout */
  --ka-container: 1180px;
  --ka-container-narrow: 720px;
  --ka-gutter: var(--ka-4);

  /* Motion. Short. Long animations feel broken on slow devices. */
  --ka-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ka-fast: 120ms;
  --ka-slow: 220ms;

  /* Stack order */
  --ka-z-sticky: 100;
  --ka-z-header: 200;
  --ka-z-nav:    300;
  --ka-z-modal:  400;
  --ka-z-toast:  500;
}

@media (min-width: 768px) {
  :root {
    --ka-gutter: var(--ka-6);
    --ka-text-3xl: 2.5rem;
    --ka-text-2xl: 1.875rem;
  }
}

/* Users who ask for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  :root { --ka-fast: 0ms; --ka-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   2. RESET
   Small on purpose. A full normalize is mostly dead weight in 2026.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ka-bg);
  color: var(--ka-text);
  font-family: var(--ka-font);
  font-size: var(--ka-text-base);
  line-height: var(--ka-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4 {
  line-height: var(--ka-leading-tight);
  font-weight: var(--ka-weight-bold);
  color: var(--ka-ink-900);
  text-wrap: balance;
}

h1 { font-size: var(--ka-text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--ka-text-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--ka-text-xl); }
h4 { font-size: var(--ka-text-lg); }

p { text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Every uploaded photo gets a placeholder tone so a slow image does not
   flash white and shift the layout. */
img { background-color: var(--ka-ink-100); }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: var(--ka-green-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ka-green-600); }

hr {
  border: 0;
  border-top: 1px solid var(--ka-border);
  margin: var(--ka-6) 0;
}

table { border-collapse: collapse; width: 100%; }


/* ==========================================================================
   3. ACCESSIBILITY
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--ka-focus) solid var(--ka-amber-500);
  outline-offset: 2px;
  border-radius: var(--ka-radius-sm);
}

.ka-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ka-skip {
  position: absolute;
  top: -100px; left: var(--ka-4);
  z-index: var(--ka-z-toast);
  background: var(--ka-green-700);
  color: var(--ka-text-invert);
  padding: var(--ka-3) var(--ka-5);
  border-radius: 0 0 var(--ka-radius) var(--ka-radius);
  font-weight: var(--ka-weight-medium);
  text-decoration: none;
  transition: top var(--ka-fast) var(--ka-ease);
}
.ka-skip:focus { top: 0; color: var(--ka-text-invert); }


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.ka-container {
  width: 100%;
  max-width: var(--ka-container);
  margin-inline: auto;
  padding-inline: var(--ka-gutter);
}

.ka-container--narrow { max-width: var(--ka-container-narrow); }

.ka-section { padding-block: var(--ka-8); }
@media (min-width: 768px) { .ka-section { padding-block: var(--ka-12); } }

/* Vertical rhythm. Use instead of margins on children. */
.ka-stack > * + * { margin-top: var(--ka-4); }
.ka-stack--sm > * + * { margin-top: var(--ka-2); }
.ka-stack--lg > * + * { margin-top: var(--ka-6); }

/* Horizontal group that wraps. */
.ka-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ka-2);
  align-items: center;
}
.ka-cluster--between { justify-content: space-between; }
.ka-cluster--gap-lg { gap: var(--ka-4); }

/* Card grid. One column on a phone, always. */
.ka-grid {
  display: grid;
  gap: var(--ka-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .ka-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ka-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ka-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Sidebar plus content. Stacks on mobile. */
.ka-split { display: grid; gap: var(--ka-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .ka-split { grid-template-columns: 280px 1fr; align-items: start; }
  .ka-split--right { grid-template-columns: 1fr 320px; }
}


/* ==========================================================================
   5. BUTTONS
   Every button clears 48px. Primary actions clear 56px.
   ========================================================================== */

.ka-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ka-2);
  min-height: var(--ka-tap);
  padding: var(--ka-3) var(--ka-5);
  border-radius: var(--ka-radius);
  font-size: var(--ka-text-base);
  font-weight: var(--ka-weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ka-fast) var(--ka-ease),
              border-color var(--ka-fast) var(--ka-ease),
              transform var(--ka-fast) var(--ka-ease);
  -webkit-tap-highlight-color: transparent;
}

.ka-btn:active { transform: translateY(1px); }

.ka-btn:disabled,
.ka-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ka-btn--primary {
  background: var(--ka-green-700);
  color: var(--ka-text-invert);
}
.ka-btn--primary:hover { background: var(--ka-green-800); color: var(--ka-text-invert); }

/* The one colour that means act now. Used for call, apply, hire. */
.ka-btn--action {
  background: var(--ka-amber-500);
  color: var(--ka-ink-900);
  font-weight: var(--ka-weight-bold);
}
.ka-btn--action:hover { background: var(--ka-amber-400); color: var(--ka-ink-900); }

.ka-btn--outline {
  background: var(--ka-surface);
  color: var(--ka-green-800);
  border-color: var(--ka-border-firm);
}
.ka-btn--outline:hover { background: var(--ka-green-50); border-color: var(--ka-green-600); }

.ka-btn--ghost { background: transparent; color: var(--ka-text-soft); }
.ka-btn--ghost:hover { background: var(--ka-surface-alt); color: var(--ka-text); }

.ka-btn--danger { background: var(--ka-busy); color: var(--ka-text-invert); }
.ka-btn--danger:hover { background: #a5322a; color: var(--ka-text-invert); }

.ka-btn--lg { min-height: var(--ka-tap-lg); font-size: var(--ka-text-lg); padding-inline: var(--ka-6); }
.ka-btn--sm { min-height: 40px; font-size: var(--ka-text-sm); padding: var(--ka-2) var(--ka-3); }
.ka-btn--block { display: flex; width: 100%; }

/* Square icon button. Still 48px. */
.ka-btn--icon { width: var(--ka-tap); padding: 0; }


/* ==========================================================================
   6. FORMS
   ========================================================================== */

.ka-field { display: block; }
.ka-field + .ka-field { margin-top: var(--ka-4); }

.ka-label {
  display: block;
  margin-bottom: var(--ka-2);
  font-size: var(--ka-text-sm);
  font-weight: var(--ka-weight-medium);
  color: var(--ka-text-soft);
}

.ka-label__req { color: var(--ka-busy); margin-left: 2px; }

.ka-input,
.ka-select,
.ka-textarea {
  display: block;
  width: 100%;
  min-height: var(--ka-tap);
  padding: var(--ka-3);
  background: var(--ka-surface);
  border: 1px solid var(--ka-border-firm);
  border-radius: var(--ka-radius);
  font-size: var(--ka-text-base); /* never below 16px or iOS zooms on focus */
  color: var(--ka-text);
  transition: border-color var(--ka-fast) var(--ka-ease),
              box-shadow var(--ka-fast) var(--ka-ease);
}

.ka-input::placeholder,
.ka-textarea::placeholder { color: var(--ka-ink-500); }

.ka-input:focus,
.ka-select:focus,
.ka-textarea:focus {
  border-color: var(--ka-green-600);
  box-shadow: 0 0 0 3px var(--ka-green-100);
  outline: none;
}

.ka-textarea { min-height: 120px; resize: vertical; line-height: var(--ka-leading); }

.ka-select {
  appearance: none;
  padding-right: var(--ka-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b665c'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ka-3) center;
  background-size: 20px;
}

.ka-input[aria-invalid="true"],
.ka-select[aria-invalid="true"],
.ka-textarea[aria-invalid="true"] {
  border-color: var(--ka-busy);
  background: var(--ka-busy-bg);
}

.ka-hint { margin-top: var(--ka-2); font-size: var(--ka-text-sm); color: var(--ka-text-mute); }
.ka-error { margin-top: var(--ka-2); font-size: var(--ka-text-sm); color: var(--ka-busy); font-weight: var(--ka-weight-medium); }

/* Checkbox and radio rows. The whole row is the target, not the box. */
.ka-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ka-3);
  min-height: var(--ka-tap);
  padding: var(--ka-2) 0;
  cursor: pointer;
}
.ka-check input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ka-green-700); }
.ka-check span { font-size: var(--ka-text-base); }

/* Search bar used on the browse screens. */
.ka-search { display: flex; gap: var(--ka-2); }
.ka-search .ka-input { flex: 1; }


/* ==========================================================================
   7. CARDS
   ========================================================================== */

.ka-card {
  background: var(--ka-surface);
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius-lg);
  padding: var(--ka-4);
  box-shadow: var(--ka-shadow-sm);
  transition: box-shadow var(--ka-fast) var(--ka-ease),
              border-color var(--ka-fast) var(--ka-ease);
}

.ka-card--link:hover { box-shadow: var(--ka-shadow); border-color: var(--ka-border-firm); }
.ka-card--flat { box-shadow: none; }
.ka-card--pad-lg { padding: var(--ka-6); }

.ka-card__head { display: flex; gap: var(--ka-3); align-items: flex-start; }
.ka-card__body { margin-top: var(--ka-3); }
.ka-card__foot {
  margin-top: var(--ka-4);
  padding-top: var(--ka-3);
  border-top: 1px solid var(--ka-border);
}

/* Worker and gang avatars. Fixed size so the grid never jumps. */
.ka-avatar {
  width: 56px; height: 56px;
  border-radius: var(--ka-radius);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ka-ink-200);
}
.ka-avatar--lg { width: 88px; height: 88px; border-radius: var(--ka-radius-lg); }
.ka-avatar--sm { width: 40px; height: 40px; border-radius: var(--ka-radius-sm); }

/* Fallback when there is no photo. Initials on a tinted block. */
.ka-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ka-green-100);
  color: var(--ka-green-800);
  font-weight: var(--ka-weight-bold);
  font-size: var(--ka-text-lg);
}


/* ==========================================================================
   8. BADGES, PILLS AND STATUS
   Rule: a status is never colour only. It always carries a word.
   ========================================================================== */

.ka-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ka-1);
  padding: 3px var(--ka-2);
  border-radius: var(--ka-radius-sm);
  font-size: var(--ka-text-xs);
  font-weight: var(--ka-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.ka-badge--verified { background: var(--ka-green-100); color: var(--ka-green-800); }
.ka-badge--vouched  { background: var(--ka-info-bg);   color: var(--ka-info); }
.ka-badge--new      { background: var(--ka-amber-100); color: var(--ka-amber-700); }
.ka-badge--neutral  { background: var(--ka-ink-100);   color: var(--ka-ink-700); }

/* Availability. Dot plus word. */
.ka-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ka-2);
  padding: var(--ka-1) var(--ka-3);
  border-radius: var(--ka-radius-pill);
  font-size: var(--ka-text-sm);
  font-weight: var(--ka-weight-medium);
  white-space: nowrap;
}
.ka-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ka-status--live  { background: var(--ka-live-bg);  color: var(--ka-live); }
.ka-status--busy  { background: var(--ka-busy-bg);  color: var(--ka-busy); }
.ka-status--leave { background: var(--ka-leave-bg); color: var(--ka-leave); }

/* Trade chips. Also used for district filters. */
.ka-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ka-1);
  min-height: 38px;
  padding: var(--ka-2) var(--ka-3);
  background: var(--ka-surface);
  border: 1px solid var(--ka-border-firm);
  border-radius: var(--ka-radius-pill);
  font-size: var(--ka-text-sm);
  color: var(--ka-text-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ka-fast) var(--ka-ease),
              border-color var(--ka-fast) var(--ka-ease);
}
.ka-chip:hover { background: var(--ka-green-50); border-color: var(--ka-green-500); color: var(--ka-green-800); }
.ka-chip[aria-pressed="true"],
.ka-chip--on {
  background: var(--ka-green-700);
  border-color: var(--ka-green-700);
  color: var(--ka-text-invert);
}

/* Horizontal scroller for chips on a phone. No wrap, swipe instead. */
.ka-chips-scroll {
  display: flex;
  gap: var(--ka-2);
  overflow-x: auto;
  padding-bottom: var(--ka-2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ka-chips-scroll::-webkit-scrollbar { display: none; }

/* Wage figure. Tabular numbers so columns line up. */
.ka-wage {
  font-family: var(--ka-font-num);
  font-weight: var(--ka-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ka-ink-900);
}
.ka-wage__unit { font-family: var(--ka-font); font-weight: var(--ka-weight-normal); font-size: var(--ka-text-sm); color: var(--ka-text-mute); }

/* Rating. Star glyph plus number, never stars alone. */
.ka-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--ka-1);
  font-size: var(--ka-text-sm);
  font-weight: var(--ka-weight-medium);
  color: var(--ka-ink-800);
}
.ka-rating__star { color: var(--ka-amber-500); }
.ka-rating__count { color: var(--ka-text-mute); font-weight: var(--ka-weight-normal); }


/* ==========================================================================
   9. NOTICES
   ========================================================================== */

.ka-notice {
  display: flex;
  gap: var(--ka-3);
  padding: var(--ka-4);
  border-radius: var(--ka-radius);
  border-left: 4px solid;
  font-size: var(--ka-text-sm);
}
.ka-notice__title { font-weight: var(--ka-weight-bold); display: block; margin-bottom: var(--ka-1); }

.ka-notice--info  { background: var(--ka-info-bg);  border-color: var(--ka-info);  color: var(--ka-ink-800); }
.ka-notice--ok    { background: var(--ka-live-bg);  border-color: var(--ka-live);  color: var(--ka-ink-800); }
.ka-notice--warn  { background: var(--ka-leave-bg); border-color: var(--ka-leave); color: var(--ka-ink-800); }
.ka-notice--error { background: var(--ka-busy-bg);  border-color: var(--ka-busy);  color: var(--ka-ink-800); }

/* Dashboard banner. This is what carries the phone verification prompt
   to accounts created before that feature ships. */
.ka-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ka-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--ka-4);
  background: var(--ka-amber-50);
  border: 1px solid var(--ka-amber-400);
  border-radius: var(--ka-radius);
}


/* ==========================================================================
   10. HEADER AND NAVIGATION
   ========================================================================== */

.ka-header {
  position: sticky;
  top: 0;
  z-index: var(--ka-z-header);
  background: var(--ka-surface);
  border-bottom: 1px solid var(--ka-border);
}

.ka-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ka-3);
  min-height: 60px;
}

.ka-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ka-2);
  font-size: var(--ka-text-xl);
  font-weight: var(--ka-weight-bold);
  color: var(--ka-green-800);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.ka-logo:hover { color: var(--ka-green-700); }

.ka-nav { display: none; }
.ka-nav__list { display: flex; gap: var(--ka-1); align-items: center; }
.ka-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--ka-tap);
  padding: 0 var(--ka-3);
  border-radius: var(--ka-radius);
  font-size: var(--ka-text-sm);
  font-weight: var(--ka-weight-medium);
  color: var(--ka-text-soft);
  text-decoration: none;
}
.ka-nav__link:hover { background: var(--ka-surface-alt); color: var(--ka-text); }
.ka-nav__link[aria-current="page"] { color: var(--ka-green-800); background: var(--ka-green-50); }

@media (min-width: 900px) {
  .ka-nav { display: block; }
  .ka-menu-toggle { display: none; }
}

.ka-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ka-tap);
  height: var(--ka-tap);
  border-radius: var(--ka-radius);
  color: var(--ka-ink-800);
}
.ka-menu-toggle:hover { background: var(--ka-surface-alt); }

/* Bottom bar on phones. This is the real navigation for most users.
   Five slots maximum. Anything else goes behind More. */
.ka-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--ka-z-nav);
  display: flex;
  background: var(--ka-surface);
  border-top: 1px solid var(--ka-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ka-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--ka-tap);
  padding: var(--ka-2) var(--ka-1);
  font-size: var(--ka-text-xs);
  font-weight: var(--ka-weight-medium);
  color: var(--ka-text-mute);
  text-decoration: none;
}
.ka-tabbar__item[aria-current="page"] { color: var(--ka-green-700); }
.ka-tabbar__icon { width: 24px; height: 24px; }

/* Body needs clearance so the bar never covers the last card. */
body.has-tabbar { padding-bottom: calc(var(--ka-tap) + var(--ka-4) + env(safe-area-inset-bottom, 0)); }

@media (min-width: 900px) {
  .ka-tabbar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.ka-footer {
  margin-top: var(--ka-12);
  padding-block: var(--ka-8);
  background: var(--ka-green-900);
  color: var(--ka-ink-300);
  font-size: var(--ka-text-sm);
}
.ka-footer a { color: var(--ka-ink-100); text-decoration: none; }
.ka-footer a:hover { color: var(--ka-white); text-decoration: underline; }
.ka-footer__title {
  color: var(--ka-white);
  font-size: var(--ka-text-sm);
  font-weight: var(--ka-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--ka-3);
}
.ka-footer__legal {
  margin-top: var(--ka-8);
  padding-top: var(--ka-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ka-ink-400);
  font-size: var(--ka-text-xs);
}


/* ==========================================================================
   12. EMPTY AND LOADING STATES
   These matter more than usual here. Early on, most screens will be empty,
   and an empty screen that explains itself is the difference between a
   user coming back and a user deciding the app is broken.
   ========================================================================== */

.ka-empty {
  padding: var(--ka-10) var(--ka-4);
  text-align: center;
  background: var(--ka-surface);
  border: 1px dashed var(--ka-border-firm);
  border-radius: var(--ka-radius-lg);
}
.ka-empty__icon { margin: 0 auto var(--ka-4); width: 56px; height: 56px; color: var(--ka-ink-400); }
.ka-empty__title { font-size: var(--ka-text-lg); font-weight: var(--ka-weight-bold); margin-bottom: var(--ka-2); }
.ka-empty__text { color: var(--ka-text-mute); max-width: 40ch; margin: 0 auto var(--ka-5); }

.ka-skeleton {
  background: linear-gradient(90deg, var(--ka-ink-100) 25%, var(--ka-ink-200) 37%, var(--ka-ink-100) 63%);
  background-size: 400% 100%;
  animation: ka-shimmer 1.4s ease infinite;
  border-radius: var(--ka-radius-sm);
}
.ka-skeleton--line { height: 14px; margin-bottom: var(--ka-2); }
.ka-skeleton--avatar { width: 56px; height: 56px; border-radius: var(--ka-radius); }

@keyframes ka-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}


/* ==========================================================================
   13. UTILITIES
   Small and deliberate. Not a utility framework.
   ========================================================================== */

.ka-hide { display: none !important; }
@media (max-width: 639px)  { .ka-hide-sm { display: none !important; } }
@media (min-width: 900px)  { .ka-hide-lg { display: none !important; } }

.ka-center { text-align: center; }
.ka-right  { text-align: right; }

.ka-mute  { color: var(--ka-text-mute); }
.ka-soft  { color: var(--ka-text-soft); }
.ka-small { font-size: var(--ka-text-sm); }
.ka-xs    { font-size: var(--ka-text-xs); }
.ka-bold  { font-weight: var(--ka-weight-bold); }

.ka-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ka-mt-0 { margin-top: 0 !important; }
.ka-mt-4 { margin-top: var(--ka-4) !important; }
.ka-mt-6 { margin-top: var(--ka-6) !important; }
.ka-mb-4 { margin-bottom: var(--ka-4) !important; }

.ka-full { width: 100%; }


/* ==========================================================================
   14. PRINT
   Contractors print worker lists and muster sheets. Make that not ugly.
   ========================================================================== */

@media print {
  .ka-header, .ka-tabbar, .ka-footer, .ka-btn, .ka-chips-scroll { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .ka-card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
}

/* End of Kaam Ase design system v1.0.0 */