/* shared/tokens.css: Figma tokens for "Requests - Task" (file VPKybj9jCMEQKKPynTu7Zo), read from
   Req Details 1535:79582 and Request List 2229:28671 on 12 Oct 2026. Figma names are in the comments.
   Radii, spacing and sheet corner are read from the Request List design context (no variables exist for them). */
:root {
  /* colour: MD3_Antz/* */
  --c-primary: #37BD69;              /* MD3_Antz/Primary: active tab, indicator */
  --c-on-primary: #FFFFFF;           /* MD3_Antz/OnPrimary */
  --c-on-surface: #006D35;           /* MD3_Antz/OnSurface: "Approved" status text */
  --c-on-surface-variant: #44544A;   /* MD3_Antz/OnSurfaceVariant, Neutrals/greengrey */
  --c-on-primary-container: #1F515B; /* MD3_Antz/OnPrimaryContainer: selected filter chip fill */
  --c-on-secondary-container: #1F415B; /* MD3_Antz/OnSecondaryContainer: titles, ids */
  --c-secondary: #00D6C9;            /* MD3_Antz/Secondary: links ("more"), low priority flag */
  --c-tertiary: #FA6140;             /* MD3_Antz/Tertiary: high priority flag */
  --c-error: #E93353;                /* MD3_Antz/Error */
  --c-on-error: #FFFFFF;             /* MD3_Antz/OnError */
  --c-moderate-secondary: #E4B819;   /* MD3_Antz/moderateSecondary: awaiting */
  --c-background: #EFF5F2;           /* MD3_Antz/Background, tab bar bottom border */
  --c-on-background: #E1F9ED;        /* MD3_Antz/OnBackground: approved status fill */
  --c-surface-variant: #DAE7DF;      /* MD3_Antz/SurfaceVariant: list page background */
  --c-display-bg-secondary: #DDEBE9; /* MD3_Antz/displaybgSecondary: unselected filter chip */
  --c-outline: #839D8D;              /* MD3_Antz/Outline */
  --c-neutral-primary: #000000;      /* MD3_Antz/neutralPrimary */
  --c-neutral-secondary: #7A8684;    /* MD3_Antz/neutralSecondary: captions */
  --c-neutral-05: rgba(0, 0, 0, 0.05); /* MD3_Antz/neutral05: hairlines */
  --c-neutral-20: rgba(0, 0, 0, 0.2);  /* neutralPrimary20 */
  --c-white: #FFFFFF;
  /* status chips (Statuses component 89:129883) */
  --c-st-awaiting-bg: rgba(228, 184, 25, 0.1);
  --c-st-awaiting-fg: #250E01;
  --c-st-progress-bg: rgba(0, 214, 201, 0.1);
  --c-st-progress-fg: #1F415B;
  --c-st-approved-bg: #E1F9ED;
  --c-st-approved-fg: #006D35;
  --c-st-done-bg: #000000;
  --c-st-done-fg: #FFFFFF;
  --c-st-time: rgba(0, 0, 0, 0.4);

  /* type: Antz text/*, Inter; Figma line height 100% renders as normal */
  --t-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-major-title: 600 24px/normal var(--t-family);   /* Antz_Major_Title */
  --t-medium: 500 20px/normal var(--t-family);        /* Antz_Medium_Medium */
  --t-minor-title: 600 16px/normal var(--t-family);   /* Antz_Minor_Title */
  --t-minor-medium: 500 16px/normal var(--t-family);  /* Antz_Minor_Medium */
  --t-minor-regular: 400 16px/normal var(--t-family); /* Antz_Minor_Regular */
  --t-body-title: 600 14px/normal var(--t-family);    /* Antz_Body_Title */
  --t-body-medium: 500 14px/normal var(--t-family);   /* Antz_Body_Medium, letter-spacing 0.1px */
  --t-body-regular: 400 14px/normal var(--t-family);  /* Antz_Body_Regular */
  --t-subtext-title: 600 12px/normal var(--t-family); /* Antz_Subtext_title */
  --t-subtext-regular: 400 12px/normal var(--t-family); /* Antz_Subtext_Regular */
  --t-body-medium-ls: 0.1px;

  /* radius */
  --r-card: 12px;      /* Request Card */
  --r-chip: 8px;       /* Filter chip */
  --r-flag: 4px;       /* Priority flag */
  --r-status: 10px;    /* Statuses: bottom corners */
  --r-pill: 100px;     /* tab indicator */
  --r-sheet: 28px;     /* bottom sheet top corners (assumed, MD3 default; not in the variables) */

  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;

  /* shadow */
  --sh-1: 0 1px 1px rgba(0, 0, 0, 0.1);  /* "1px Shadow" */
  --sh-card: 0 2px 2px rgba(0, 0, 0, 0.1); /* "cards" */

  /* frame (tablet) */
  --frame-w: 834px;
  --frame-h: 1194px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: var(--t-body-regular); color: var(--c-neutral-primary); background: #eceff0; }
button { font: inherit; color: inherit; cursor: pointer; }
.t-major-title { font: var(--t-major-title); } .t-medium { font: var(--t-medium); }
.t-minor-title { font: var(--t-minor-title); } .t-minor-medium { font: var(--t-minor-medium); } .t-minor-regular { font: var(--t-minor-regular); }
.t-body-title { font: var(--t-body-title); } .t-body-medium { font: var(--t-body-medium); letter-spacing: var(--t-body-medium-ls); } .t-body-regular { font: var(--t-body-regular); }
.t-subtext-title { font: var(--t-subtext-title); } .t-subtext-regular { font: var(--t-subtext-regular); }

/* page: stage bar above the tablet frame */
.page { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; min-height: 100vh; }
.tab-frame { width: var(--frame-w); height: var(--frame-h); position: relative; overflow: hidden; background: var(--c-surface-variant);
  border-radius: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); flex: none; }
#app { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* shell: top app bar (Figma "Top app bar"), scrolling main, optional foot */
.app-top { background: var(--c-white); height: 72px; display: flex; gap: var(--s-1); align-items: center; padding: 26px 24px 22px; flex: none; }
.app-top__lead { width: 36px; height: 48px; display: flex; align-items: center; border: 0; background: none; padding: 0; }
.app-top__title { flex: 1; min-width: 0; font: var(--t-medium); color: var(--c-on-secondary-container); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-top__actions { display: flex; align-items: center; }
.app-top__btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; border-radius: 20px; }
.app-top__btn svg, .app-top__lead svg { width: 24px; height: 24px; fill: var(--c-on-secondary-container); }
.app-main { flex: 1; min-height: 0; overflow-y: auto; }
.app-foot { flex: none; }
.route-stub { padding: 48px 24px; text-align: center; color: var(--c-on-surface-variant); }
.route-stub b { display: block; font: var(--t-major-title); color: var(--c-on-secondary-container); margin-bottom: 8px; }

/* bottom sheets and overlays inside the frame (openLayer / closeLayer) */
#layer { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
#layer .layer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); pointer-events: auto; }
#layer .layer__box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; background: var(--c-white);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; pointer-events: auto; }
#layer .layer__box--center { top: 50%; bottom: auto; left: 50%; right: auto; width: 520px; transform: translate(-50%, -50%); border-radius: var(--r-card); }
#toast { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 60; background: #1d2b24; color: #fff; font: var(--t-body-regular);
  padding: 12px 20px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 640px; }
#toast.show { opacity: 1; }

/* prototype role bar: a dashed control above the frame, not part of the product (shared/stage.js) */
.stage { width: var(--frame-w); display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 12px; padding: 6px 8px 6px 14px; min-height: 42px;
  border: 1.5px dashed #8aa095; border-radius: 12px; background: rgba(255, 255, 255, 0.6); font: var(--t-subtext-regular); color: var(--c-on-surface-variant); }
.stage__tag { font: var(--t-subtext-title); text-transform: uppercase; letter-spacing: .06em; color: #5d7468; }
.stage__who { font: var(--t-body-regular); color: #1d2b24; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage__switch { width: 124px; font-weight: 600 !important; }
.stage > * { flex: none; } .stage > .stage__who { flex: 0 1 auto; } .stage > .stage__sp { flex: 1 1 0; }
.stage__who b { font: var(--t-body-title); color: var(--c-on-secondary-container); }
.stage__who i { font-style: normal; color: #8aa095; }
.stage label { display: flex; align-items: center; gap: 6px; }
.stage select, .stage button, .stage__link { font: var(--t-subtext-regular); padding: 5px 8px; border: 1px solid #8aa095; border-radius: 6px; background: #fff; color: #1d2b24; }
.stage button { cursor: pointer; }
.stage__link { text-decoration: none; }
.stage__link:hover, .stage button:hover { background: var(--c-background); }
.stage__sp { flex: 1; }
/* B3: the Web / Tab toggle in the role bar (procurement only) */
.stage .stage__seg { display: inline-flex; border: 1px solid #8aa095; border-radius: 6px; overflow: hidden; background: #fff; }
.stage:has(.stage__seg) { gap: 6px; }
.stage:has(.stage__seg):not(.w-stage) .stage__switch { width: 106px; }
.stage:has(.stage__seg) .stage__link, .stage:has(.stage__seg) > button { padding-left: 6px; padding-right: 6px; }
.stage .stage__seg .stage__seg-b { font: 600 11px/normal var(--t-family); padding: 5px 6px; border: 0; border-radius: 0; background: #fff; color: #1d2b24; line-height: normal; }
.stage .stage__seg .stage__seg-b + .stage__seg-b { border-left: 1px solid #8aa095; }
.stage .stage__seg .stage__seg-b.is-on { background: var(--c-on-primary-container); color: #fff; }
.stage .stage__seg button.stage__seg-b:hover { background: var(--c-background); }