/* Page stylesheet bundle (perf/build/build.js). Sources, in their original order:
   ds/introjobs20designsystem_67841a/styles.css */
/* Self-hosted copies of the Google Fonts files the DS loads (same files, same unicode-ranges, font-display:swap).
   Paths are relative to project/vendor/css/, where the page stylesheet bundles live. */
@font-face{font-family: 'Almarai'; font-style: normal; font-weight: 300; font-display: swap; src: url(../../fonts/almarai-arabic-0d9131b0.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family: 'Almarai'; font-style: normal; font-weight: 300; font-display: swap; src: url(../../fonts/almarai-latin-8395dafa.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Almarai'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/almarai-arabic-96e5c91a.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family: 'Almarai'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/almarai-latin-1cfc974a.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Almarai'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/almarai-arabic-de48eb53.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family: 'Almarai'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/almarai-latin-7ed77c77.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Almarai'; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/almarai-arabic-d726cb60.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family: 'Almarai'; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/almarai-latin-f9ccbe05.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/anton-latin-ext-1d324de6.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/anton-latin-75f46c51.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(../../fonts/eb-garamond-latin-ext-7a37b980.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(../../fonts/eb-garamond-latin-bc5f3a06.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(../../fonts/eb-garamond-latin-ext-7a37b980.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(../../fonts/eb-garamond-latin-bc5f3a06.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/eb-garamond-latin-ext-0a46bdfa.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/eb-garamond-latin-0652b7dc.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/eb-garamond-latin-ext-0a46bdfa.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/eb-garamond-latin-0652b7dc.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/eb-garamond-latin-ext-0a46bdfa.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/eb-garamond-latin-0652b7dc.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/figtree-latin-ext-fd63b3a7.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/figtree-latin-7073ac15.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/figtree-latin-ext-fd63b3a7.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/figtree-latin-7073ac15.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/figtree-latin-ext-fd63b3a7.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/figtree-latin-7073ac15.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/figtree-latin-ext-fd63b3a7.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/figtree-latin-7073ac15.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

@font-face{font-family:'Figtree Fallback A';src:local('Arial'),local('ArialMT'),local('Arimo');size-adjust:100.61%;ascent-override:94.42%;descent-override:24.85%;line-gap-override:0%}
@font-face{font-family:'Figtree Fallback R';src:local('Roboto'),local('Roboto-Regular');size-adjust:99.95%;ascent-override:95.05%;descent-override:25.01%;line-gap-override:0%}
@font-face{font-family:'EB Garamond Fallback T';font-style:normal;src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Tinos');size-adjust:91.94%;ascent-override:109.53%;descent-override:32.41%;line-gap-override:0%}
@font-face{font-family:'EB Garamond Fallback T';font-style:italic;src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Tinos Italic');size-adjust:95.38%;ascent-override:105.58%;descent-override:31.24%;line-gap-override:0%}
@font-face{font-family:'EB Garamond Fallback N';font-style:normal;src:local('Noto Serif'),local('NotoSerif-Regular');size-adjust:77.12%;ascent-override:130.58%;descent-override:38.64%;line-gap-override:0%}
@font-face{font-family:'EB Garamond Fallback N';font-style:italic;src:local('Noto Serif Italic'),local('NotoSerif-Italic');size-adjust:80%;ascent-override:125.87%;descent-override:37.25%;line-gap-override:0%}

/* ds/introjobs20designsystem_67841a/styles.css */
/* ds/introjobs20designsystem_67841a/tokens/fonts.css */
/* Google Fonts substitutes (kept from source). EB Garamond = serif display; Figtree = UI sans; Anton = condensed names.
   Arabic: Almarai for all Arabic text (headlines + UI). */
/* Google Fonts @import → self-hosted (fonts/fonts.css, at the top of this file) */

/* ds/introjobs20designsystem_67841a/tokens/colors.css */
/* APP tokens — kept 1:1 from the Wispr Flow source system. intro.jobs additions (teal, plans, record, status) live in tokens/intro.css. */
:root{
/* Ink (warm violet-black) */
--ink-900:#2D2A33;--ink-800:#302D36;--ink-700:#4A4751;--ink-500:#6E6C73;--ink-400:#9A989E;--ink-300:#ADACB0;--ink-200:#BDBCC0;--ink-150:#D9D6DC;--ink-100:#E0DFE3;
/* Neutrals / surfaces (sampled @3x) */
--white:#FFFFFF;--canvas:#F4F2F5;--fog:#E8E9ED;--mist:#F4F2F5;--field:#F3F3F5;--tab-glass:rgba(253,253,255,0.92);
/* Lavender — Pro, selection, tonal buttons */
--lavender-50:#F6F1FF;--lavender-100:#E4DCFF;--lavender-200:#D6CCF6;--lavender-400:#A79BDB;--lavender-500:#8C7BC9;--lavender-700:#634894;--lilac:#F0D7FF;--serif-lilac:#AE98D4;--grape:#69339B;
/* Warm accents */
--cream:#FFFFEB;--cream-200:#FFF9D6;--marigold:#EFAC5E;--sparkle:#F5B83D;
/* Greens — stats + "on" states */
--forest:#2B7A57;--mint:#52BE78;--mint-100:#CDEBD7;
/* Semantic */
--danger:#E0464E;--link:#8C7BC9;

/* Aliases */
--bg-app:var(--canvas);--surface-card:var(--white);--surface-muted:var(--fog);--surface-sunken:var(--mist);--surface-selected:var(--cream);--surface-promo:var(--cream-200);
--text-primary:var(--ink-900);--text-body:#3A3840;--text-secondary:var(--ink-500);--text-tertiary:var(--ink-400);--text-on-dark:var(--white);--text-accent:var(--lavender-700);--text-stat:var(--forest);
--border-subtle:var(--ink-150);--border-hairline:#E1DFE4;--border-strong:var(--ink-900);--border-pro:var(--lavender-400);
--btn-primary-bg:var(--ink-900);--btn-primary-fg:var(--white);--btn-disabled-bg:var(--ink-300);--btn-tonal-bg:var(--lavender-100);--btn-tonal-fg:var(--ink-900);
--badge-pro-bg:var(--lavender-400);--badge-pro-fg:var(--white);
}

/* ds/introjobs20designsystem_67841a/tokens/typography.css */
/* BRAND fonts, weights and type scale (shared by App, Dashboard and Web). Web display sizes: tokens/web.css. Dashboard sizes: tokens/dashboard.css. */
:root{
--font-serif:'EB Garamond','EB Garamond Fallback T','EB Garamond Fallback N','Cormorant Garamond',Garamond,Georgia,serif;
--font-condensed:'Anton','Bebas Neue','Oswald',Impact,sans-serif;
--font-sans:'Figtree','Figtree Fallback A','Figtree Fallback R',-apple-system,'SF Pro Text',system-ui,sans-serif;
/* Serif display scale — measured from @3x captures (pt) */
--fs-stat:64px;--fs-display:60px;--fs-congrats:46px;--fs-h1:32px;--fs-promo:34px;
/* Sans scale */
--fs-nav:19px;--fs-btn:18px;--fs-style-title:20px;--fs-row:17px;--fs-body:16px;--fs-label:15px;--fs-sub:14px;--fs-footnote:13px;--fs-badge:11px;--fs-tab:10px;
--lh-tight:1.12; /* @kind font */
--lh-snug:1.25; /* @kind font */
--lh-body:1.4; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--tracking-serif:-0.03em; /* @kind font */
--tracking-sans:0em; /* @kind font */
--type-display-family:var(--font-serif);--type-ui-family:var(--font-sans);
}

/* ds/introjobs20designsystem_67841a/tokens/spacing.css */
/* BRAND spacing (--space-* ladder, shared by App, Dashboard and Web). Radii, shadows and device insets below are kept 1:1 from source and used by App. */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;
/* Layout — measured in pt from 1179×2676 @3x captures (393×852 device) */
--status-bar-h:59px;--header-h:72px;--screen-gutter:16px;--onboarding-gutter:30px;--card-pad:16px;
--btn-h:54px;--btn-h-md:44px;--option-h:66px;--option-gap:12px;--list-row-h:68px;
--tabbar-h:62px;--tabbar-inset:21px;--tabbar-bottom:21px;--tab-pill-w:74px;--fab-size:64px;
--radius-hair:2px;--radius-2xs:3px;--radius-xs:6px;--radius-sm:10px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-sheet:28px;--radius-pill:999px;--radius-btn:10px;
--shadow-card:0 1px 2px rgba(45,42,51,0.04);--shadow-tabbar:0 6px 24px rgba(45,42,51,0.10),0 1px 2px rgba(45,42,51,0.06);--shadow-fab:0 8px 20px rgba(45,42,51,0.28);--shadow-toast:0 8px 24px rgba(45,42,51,0.25);
--blur-glass:saturate(180%) blur(20px); /* @kind other */
--ease-out:cubic-bezier(.22,1,.36,1); /* @kind other */
--ease-spring:cubic-bezier(.34,1.4,.64,1); /* @kind other */
--dur-fast:150ms; /* @kind other */
--dur-base:250ms; /* @kind other */
--dur-sheet:380ms; /* @kind other */
}

/* ds/introjobs20designsystem_67841a/tokens/motion.css */
/* BRAND motion (durations, easings, reduced motion), shared by App, Dashboard and Web. Calm, quick, functional. Record ring + live dot added in tokens/intro.css. */
:root{
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-emphasized:cubic-bezier(.05,.7,.1,1); /* @kind other */
--dur-instant:90ms; /* @kind other */
--dur-toggle:220ms; /* @kind other */
--dur-toast:300ms; /* @kind other */
--dur-drawer:340ms; /* @kind other */
--toast-hold:1800ms; /* @kind other */
--press-scale:0.98; /* @kind other */
}
@keyframes wf-fade-in{from{opacity:0}to{opacity:1}}
@keyframes wf-rise-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wf-drop-in{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes wf-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes wf-drawer-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes wf-pop-in{0%{opacity:0;transform:scale(.9)}60%{opacity:1;transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes wf-dot-breathe{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes wf-sparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(8deg)}}
.wf-anim-fade{animation:wf-fade-in var(--dur-base) var(--ease-out) both}
.wf-anim-rise{animation:wf-rise-in var(--dur-base) var(--ease-out) both}
.wf-anim-drop{animation:wf-drop-in var(--dur-toast) var(--ease-out) both}
.wf-anim-sheet{animation:wf-sheet-up var(--dur-sheet) var(--ease-out) both}
.wf-anim-drawer{animation:wf-drawer-in var(--dur-drawer) var(--ease-out) both}
.wf-anim-pop{animation:wf-pop-in var(--dur-base) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
:root{--dur-base:1ms; /* @kind other */
--dur-sheet:1ms; /* @kind other */
--dur-toast:1ms; /* @kind other */
--dur-drawer:1ms; /* @kind other */
--dur-toggle:1ms; /* @kind other */
}
*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}

/* ds/introjobs20designsystem_67841a/tokens/web.css */
/* WEB (marketing site) tokens — all prefixed --web-. Kept 1:1 from source. */
:root{
--web-canvas:#FFFFFF;--web-surface:#FFFFFF;--web-border:#E4E4D0;--web-ink:#1A1A1A;--web-ink-2:#222222;--web-teal:#034F46;--web-lavender:#F0D7FF;--web-orange:#FFA946;--web-muted:#5E5C57;--web-fog:#8A8A80;--web-coral:#FF6C4C;--web-maroon:#7F1C34;--web-swirl:#F3F3E0;--web-nav-muted:#5E5C57;--web-seg-active:#FFFDF9;--web-plum-muted:#736979;--web-section-dark:#1A1A1A;
--web-fs-hero:120px;--web-fs-section:64px;--web-fs-h3:32px;--web-fs-lead:20px;--web-fs-body:16px;--web-fs-small:14px;
--web-lh-hero:0.85; /* @kind font */
--web-lh-section:1.1; /* @kind font */
--web-section-y:128px;--web-section-gap:96px;--web-gutter:40px;--web-max:1200px;--web-card-pad:32px;
--web-space-1:8px;--web-space-2:16px;--web-space-3:24px;--web-space-4:32px;--web-space-5:40px;--web-space-6:48px;--web-space-7:56px;--web-space-8:64px;--web-space-10:80px;--web-space-12:96px;--web-space-13:104px;--web-space-16:128px;--web-space-21:168px;
--web-radius-panel:40px;--web-radius-chamber:80px;--web-radius-card:32px;--web-radius-btn:12px;--web-radius-input:12px;--web-radius-tag:8px;--web-radius-pill:9999px;
--web-lh-body:1.3; /* @kind font */
--web-radius-nav:16px;
}

/* ds/introjobs20designsystem_67841a/tokens/dashboard.css */
/* DASHBOARD (web app: candidate Hunter insights + employer hiring) — kept 1:1 from the source's desktop Insights tokens (--dt-*). */
:root{
--dt-chrome:#F3F2EE;--dt-canvas:#FFFFFF;--dt-card:#F6F5F1;--dt-card-border:#E9E7E0;--dt-divider:#DCD9D0;
--dt-ink:#1A1A1A;--dt-ink-2:#3A3A38;--dt-muted:#6E6C66;--dt-faint:#A9A69E;
--dt-teal-900:#1A5E5A;--dt-teal-700:#2A877E;--dt-teal-400:#6CBDB2;--dt-teal-200:#B4E0D9;--dt-teal-100:#D3EEEA;
--dt-heat-empty:#EEEDE6;--dt-heat-past:#C9C3B6;
--dt-nav-w:62px;--dt-nav-icon:20px;--dt-nav-active:#E9E8E2;
--dt-canvas-radius:16px;--dt-card-radius:8px;--dt-chip-radius:3px;
--dt-content-max:1046px;--dt-content-pad:116px;--dt-card-pad:16px;--dt-gap:24px;
--dt-title:22px;--dt-stat:28px;--dt-section-title:28px;--dt-body:14px;--dt-label:11px;--dt-label-track:.1em;--dt-tab:15px;
}
[dir="rtl"]{--dt-label:13px;--dt-body:15px;--dt-tab:16px;}

/* ds/introjobs20designsystem_67841a/tokens/intro.css */
/* intro.jobs additions on top of the kept Wispr foundations. */
:root{
/* Teal — Interview Hunter (scale from the source's data teal) */
--teal-900:#034F46;--teal-700:#1A5E5A;--teal-500:#2A877E;--teal-300:#6CBDB2;--teal-200:#B4E0D9;--teal-100:#D3EEEA;
/* Plans — candidate */
--plan-free-fg:var(--ink-900);--plan-free-border:var(--ink-900);--plan-free-bg:transparent;
--plan-plus-bg:var(--lavender-400);--plan-plus-fg:var(--white);--plan-plus-ring:var(--lavender-400);--plan-plus-tint:var(--lavender-50);
--plan-hunter-bg:var(--teal-500);--plan-hunter-fg:var(--white);--plan-hunter-ring:var(--teal-500);--plan-hunter-tint:var(--teal-100);--plan-hunter-deep:var(--teal-900);
/* Onboarding — CV + details steps */
--onb-emphasis-bg:var(--cream-200); /* CV upload area + highlight behind the emphasised word. Fill only. */
--marigold-text:#8A5A1E; /* text-safe marigold: 5.9:1 on white, 5.5:1 on --cream-200. Use for marigold words; --marigold is NEVER text on light surfaces. */
--btn-marigold-bg:var(--marigold);--btn-marigold-fg:var(--ink-900);--btn-marigold-border:var(--ink-900); /* fill 1.96:1 on white, so the ink border (14:1) carries the edge; ink label 7.2:1 */
--icon-circle-marigold-bg:var(--marigold);--icon-circle-marigold-fg:var(--ink-900);
/* Employers */
--employer-unclaimed-bg:var(--fog);--employer-unclaimed-fg:var(--ink-500);--employer-unclaimed-border:var(--ink-300);
--employer-verified-fg:var(--ink-900);--employer-verified-tick:var(--lavender-400);
/* Record — 9:16 frame + ring */
--record:var(--danger);--record-ring-track:rgba(255,255,255,0.28);--record-ring-fill:var(--white);--record-ring-w:4px;--record-btn:72px;--frame-radius:24px;--frame-scrim:linear-gradient(180deg,rgba(20,18,26,0) 50%,rgba(20,18,26,0.72) 100%); /* @kind color */

--dur-pulse:1200ms; /* @kind other */
--dur-breathe:1600ms; /* @kind other */
--dur-morph:220ms; /* @kind other */
--dur-handoff:340ms; /* @kind other */
--dur-digit:180ms; /* @kind other */
/* Status */
--status-applied:var(--ink-900);--status-viewed:var(--lavender-700);--status-viewed-bg:var(--lavender-50);--status-interview:var(--forest);--status-interview-bg:var(--mint-100);--status-waiting:#8A5A1E;--status-waiting-bg:var(--cream-200);--status-closed:var(--ink-400);--status-closed-bg:var(--mist);
/* Arabic */
--font-arabic:'Almarai',system-ui,sans-serif;--font-serif-ar:var(--font-arabic);--font-sans-ar:var(--font-arabic);
/* Type helpers (LTR defaults; Arabic overrides below) */
--fw-display:400; /* @kind font */
--lh-scale:1; /* @kind font */
--fs-caption:12px;
--radius-frame-thumb:14px; /* 9:16 thumbnails (library, grid, job card, portfolio) */
/* Employer dashboard */
--dash-sidebar-w:248px;--dash-row-h:64px;
/* Spacing exceptions — measured from the source, phone layouts only (see starting-points/candidate-*) (--tabbar-inset and --onboarding-gutter live in spacing.css) */
--safe-top:env(safe-area-inset-top, 0px);--safe-bottom:env(safe-area-inset-bottom, 0px);
--gap-header-to-content:10px;--gap-stacked-buttons:14px;--cta-bottom:64px;--scroll-clearance:120px;--fab-offset:16px;
}
/* Arabic (RTL) — rules from the intro.jobs Arabic RTL foundation: Almarai only, nothing under 13px, line-height ×1.3 (≈1.6–1.8 body), headlines bold, no tracking/caps, web body +2px. */
[dir="rtl"]{--font-serif:'Almarai','EB Garamond',serif;--font-sans:'Almarai','Figtree',system-ui,sans-serif;--tracking-serif:0em; /* @kind font */
--fw-display:700; /* @kind font */
--lh-scale:1.3; /* @kind font */
--fs-tab:13px;--fs-badge:13px;--fs-caption:13px;--fs-footnote:13px;
--web-fs-body:17px;--web-fs-small:15px;
}
/* Employer surfaces (app + dashboard): warm stone chrome from the source's desktop palette, so employers read as a different room than candidates (cool lavender-gray). Set data-surface="employer" on the screen root. */
[data-surface="employer"]{--canvas:#F3F2EE;--bg-app:#F3F2EE;--mist:#F6F5F1;--fog:#EAE8E1;--border-hairline:#E9E7E0;--surface-muted:#EAE8E1;--surface-sunken:#F6F5F1;}
@keyframes ij-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ij-hunt{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes ij-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes ij-digit-roll{from{transform:translateY(55%);opacity:0}to{transform:none;opacity:1}}
.ij-breathe{animation:ij-breathe var(--dur-breathe) var(--ease-standard) infinite}
/* Feedback pop (shortlist, save): scale only — no fade, so it never flickers. */
@keyframes ij-pop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.ij-pop{animation:ij-pop var(--dur-base) var(--ease-out) both}
.ij-hunt-arc{animation:ij-hunt 1.6s linear infinite}
/* .ij-reduced = force the reduced-motion look inside a subtree (demo cards, in-app setting) */
.ij-reduced .ij-breathe,.ij-reduced .ij-live-dot,.ij-reduced .ij-skeleton,.ij-reduced .ij-hunt-arc{animation:none!important}
/* Skeleton: calm shimmer, 1.6s */
@keyframes ij-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.ij-skeleton{background:linear-gradient(90deg,var(--fog) 0%,var(--fog) 35%,var(--mist) 50%,var(--fog) 65%,var(--fog) 100%);background-size:200% 100%;animation:ij-shimmer var(--dur-breathe) linear infinite}
/* Direction-aware motion: --dir-x is 1 in LTR, -1 in RTL. Slides and drawers use it; video + data chrome sit under dir="ltr" so they never flip. */
:root,[dir="ltr"]{--dir-x:1; /* @kind other */
}
[dir="rtl"]{--dir-x:-1; /* @kind other */
}
@keyframes ij-slide-start{from{opacity:0;transform:translateX(calc(-16px * var(--dir-x)))}to{opacity:1;transform:none}}
@keyframes ij-slide-end{from{opacity:0;transform:translateX(calc(16px * var(--dir-x)))}to{opacity:1;transform:none}}
@keyframes ij-drawer-start{from{transform:translateX(calc(-100% * var(--dir-x)))}to{transform:none}}
.ij-anim-slide-start{animation:ij-slide-start var(--dur-base) var(--ease-out) both}
.ij-anim-slide-end{animation:ij-slide-end var(--dur-base) var(--ease-out) both}
.ij-anim-drawer{animation:ij-drawer-start var(--dur-drawer) var(--ease-out) both}
/* Reduced motion: every intro.jobs duration collapses; ambient loops stop entirely. */
@media (prefers-reduced-motion:reduce){
:root{--dur-breathe:1ms; /* @kind other */
--dur-morph:1ms; /* @kind other */
--dur-handoff:1ms; /* @kind other */
--dur-digit:1ms; /* @kind other */
--dur-pulse:1ms; /* @kind other */
}
.ij-breathe,.ij-live-dot,.ij-skeleton,.ij-hunt-arc,[style*="ij-hunt"]{animation:none!important}
}
.ij-digit{display:inline-block;animation:ij-digit-roll var(--dur-digit) var(--ease-out) both}
.ij-live-dot{animation:ij-pulse var(--dur-pulse) var(--ease-standard) infinite}

/* ds/introjobs20designsystem_67841a/tokens/roles.css */
/* ROLE tokens: the only colour names new work should use. Usage + brand-moment budget: guidelines/rules/SYSTEM.md §3. Raw palette tokens (--ink-*, --lavender-*, --teal-*, hex) stay available to components only. */
:root{
/* App: surfaces (the 90%) */
--role-page:var(--canvas);--role-card:var(--white);--role-card-quiet:var(--fog);--role-selected:var(--cream);--role-hairline:var(--border-hairline);
/* App: text */
--role-text:var(--ink-900);--role-text-body:var(--text-body);--role-text-muted:var(--ink-500);--role-text-on-dark:var(--white);
/* App: action (max 1 primary per view) */
--role-action:var(--ink-900);--role-action-fg:var(--white);--role-action-tonal:var(--lavender-100);--role-action-disabled:var(--ink-300);
/* App: accent (the 10%, one per view) */
--role-emphasis:var(--serif-lilac);--role-emphasis-warm:var(--marigold-text);--role-emphasis-bg:var(--onb-emphasis-bg);
/* App: warm action (onboarding only — "Add a role", icon circles) */
--role-action-warm:var(--btn-marigold-bg);--role-action-warm-fg:var(--btn-marigold-fg);--role-action-warm-border:var(--btn-marigold-border);
/* App: Wispr brand moments (CONTROLS/COLOR §2). Lavender = selection, tonal actions, counts, the record FAB. Cream = highlight + promo. */
--role-brand-tint:var(--lavender-100);--role-brand-tint-soft:var(--lavender-50);--role-brand-fill:var(--lavender-400);--role-brand-deep:var(--grape);--role-highlight:var(--cream);--role-highlight-soft:var(--cream-200); /* row hover: Wispr cream-200 #FFF9D6 (selected rows add the ink edge) */--role-promo:var(--cream-200);
/* App: meaning (never decoration) */
--role-stat:var(--forest);--role-success:var(--mint);--role-danger:var(--danger);--role-plus:var(--lavender-400);--role-hunter:var(--teal-500);--role-hunter-soft-bg:var(--dt-plan-hunter-bg);--role-hunter-soft-fg:var(--dt-plan-hunter-fg);--role-hunter-soft-border:var(--dt-plan-hunter-border);--role-record:var(--record);
/* Web */
--role-web-page:var(--web-canvas);--role-web-panel:var(--web-border);--role-web-chamber:var(--web-section-dark);--role-web-deep:var(--web-teal);
--role-web-text:var(--web-ink);--role-web-text-muted:var(--web-muted);--role-web-text-on-dark:var(--web-canvas);--role-web-border:var(--web-border);
--role-web-action:var(--web-lavender);--role-web-action-border:var(--web-ink);--role-web-art:var(--web-orange);
/* Dashboard */
--role-dt-chrome:var(--dt-chrome);--role-dt-page:var(--dt-canvas);--role-dt-card:var(--dt-card);--role-dt-border:var(--dt-card-border);
--role-dt-text:var(--dt-ink);--role-dt-text-muted:var(--dt-muted);
--role-dt-data-1:var(--dt-teal-900);--role-dt-data-2:var(--dt-teal-700);--role-dt-data-3:var(--dt-teal-400);--role-dt-data-4:var(--dt-teal-200);
}

/* ds/introjobs20designsystem_67841a/tokens/controls.css */
/* intro.jobs 2.0 — DS-MISSING-COMPONENTS T1–T6 + interaction states for Dashboard (Dt*) and Web (Web*) controls.
   Contrast measured on --dt-canvas #FFFFFF / --dt-card #F6F5F1 / --web-canvas #FFFFFF (page backgrounds are white; cards and chrome keep their light stone tint). Text ≥4.5:1, boundaries + icons ≥3:1. */
:root{
/* T1 · Semantic (Brand · shared: Dashboard + Web). bg = fill, fg = text on bg (≥4.5), line = icon/border/indicator (≥3) */
--sem-danger-bg:#FCEBEA;--sem-danger-fg:#A3242B;--sem-danger-line:#C9343C;
--sem-success-bg:#E6F3EC;--sem-success-fg:#1E6B47;--sem-success-line:#2B7A57;
--sem-warning-bg:#FFF4DC;--sem-warning-fg:#7A4A0E;--sem-warning-line:#A86412;
--sem-info-bg:#E8F1F7;--sem-info-fg:#1E4E73;--sem-info-line:#2F6C99;
--sem-neutral-bg:#EEEDE8;--sem-neutral-fg:#3A3A38;--sem-neutral-line:#6E6C66;
/* T2 · Control boundaries + focus (Dashboard). --dt-card-border stays decorative only (never a control edge).
   Disabled: border ≥3:1 on --dt-control-bg-disabled (3.3) and --dt-chrome (3.4); text 5.0:1 on --dt-control-bg-disabled. */
--focus-ring:#1A1A1A;--focus-ring-w:2px;--focus-ring-offset:2px;
/* CONTROLS.md v2 (Wispr rule): ink edges ONLY on a selected/focused item. Rest edges are a 1px hairline; secondary actions are gray pills with no edge. */
--dt-control-bg:#FFFFFF;--dt-control-border:#D6D3CB;--dt-control-border-hover:#A9A69E;--dt-control-border-selected:#1A1A1A;--dt-control-border-strong:#858279; /* strong = check/radio/switch only (small marks need 3:1) */
--dt-control-w:1px;--dt-control-radius:10px;--dt-pill-fill:#EFEEE9;--dt-pill-fill-hover:#E6E4DD;--dt-pill-fill-press:#DEDBD3;--dt-btn-disabled-bg:#E6E4DD;
--dt-selected-border:#1A1A1A;--dt-shadow-raise:0 1px 2px rgba(26,26,26,.08),0 0 0 1px rgba(26,26,26,.04);--dt-control-border-error:var(--sem-danger-line);--dt-control-border-success:var(--sem-success-line);
--dt-control-bg-disabled:#EEEDE8;--dt-control-border-disabled:#858279;--dt-control-text-disabled:#67655F;--dt-control-bg-readonly:#F6F5F1;
--dt-btn-secondary-border:transparent; /* was #1A1A1A: the source of the black-outline reskin. Never ink. */--dt-hover-fill:#EFEEE9;--dt-press-fill:#E6E4DD;--dt-selected-fill:#F0EFEA;
/* T2 · Web. Disabled border 3.4:1 on --web-control-bg-disabled / --web-swirl. */
--web-control-bg:#FFFDF9;--web-control-border:#86867A;--web-control-border-hover:#5E5C57;--web-control-border-selected:#1A1A1A;--web-control-border-error:var(--sem-danger-line);
--web-control-bg-disabled:#F3F3E0;--web-control-border-disabled:#838377;--web-control-text-disabled:#5E5C57;--web-hover-fill:#F6F6DF;
/* T3 · Contrast fixes. The failing tokens are kept but DECORATIVE ONLY (dividers, dots, chart gridlines). Use the -text token for words. */
--dt-faint-text:#6E6C66;     /* replaces --dt-faint (2.2:1) for text → 5.2:1 */
--dt-teal-text:#1F6E66;      /* replaces --dt-teal-700 (3.96:1) for text → 5.9:1 */
--web-caption:#5F5E57;       /* replaces --web-fog (3.4:1) for text → 6.4:1 canvas, 5.1:1 panel (--web-border), 4.9:1 lavender */
/* T4 · Dark video surface (video review only — the rest of the product is light-only) */
--video-surface:#14121A;--video-text:#FFFFFF;--video-text-muted:#B9B6C0;--video-border:#6A6672;--video-scrim:rgba(20,18,26,.72);--video-control-bg:rgba(20,18,26,.64);--video-track:rgba(255,255,255,.4);--video-fill:#FFFFFF;--video-buffer:rgba(255,255,255,.62);
/* T6 · Plan marks for Dashboard + Web (App keeps --plan-* in intro.css) */
--dt-plan-free-bg:transparent;--dt-plan-free-fg:#1A1A1A;--dt-plan-free-border:#1A1A1A;
--dt-plan-plus-bg:#E4DCFF;--dt-plan-plus-fg:#4B3577;--dt-plan-plus-border:#8C7BC9;
--dt-plan-hunter-bg:#D3EEEA;--dt-plan-hunter-fg:#1A5E5A;--dt-plan-hunter-border:#2A877E; /* PLACEHOLDER pending sign-off. fg on bg 6.15:1; border 3.5:1 on bg, 4.3:1 on white */
--web-plan-free-bg:var(--web-canvas);--web-plan-free-fg:var(--web-ink);--web-plan-free-border:var(--web-ink);
--web-plan-plus-bg:var(--web-lavender);--web-plan-plus-fg:var(--web-ink);--web-plan-plus-border:var(--web-ink);
--web-plan-hunter-bg:#D3EEEA;--web-plan-hunter-fg:#1A5E5A;--web-plan-hunter-border:#1A5E5A; /* PLACEHOLDER pending sign-off. fg 6.15:1 on bg; border 7.1:1 on cream */
/* Web onboarding (CV + details steps). Literal values: web doesn't load tokens/intro.css. Ink = web ink #1A1A1A, not app #2D2A33. */
--web-onb-emphasis-bg:#FFF9D6; /* fill only. 1.06:1 against the #FFFFEB canvas: on web put it inside a white/stone card or give the upload area a dashed ink border */
--web-marigold-text:#8A5A1E; /* 5.9:1 on white, 5.8:1 on #FFFFEB, 5.5:1 on #FFF9D6 */
--web-btn-marigold-bg:#EFAC5E;--web-btn-marigold-fg:#1A1A1A;--web-btn-marigold-border:#1A1A1A; /* label 8.9:1; border 17:1 on white. #EFAC5E is never text */
--web-icon-circle-marigold-bg:#EFAC5E;--web-icon-circle-marigold-fg:#1A1A1A;
/* Dashboard overlays */
--dt-scrim:rgba(26,26,26,.4);--dt-shadow-overlay:0 12px 32px rgba(26,26,26,.16),0 2px 6px rgba(26,26,26,.08);--dt-shadow-pop:0 6px 20px rgba(26,26,26,.14);
--dt-modal-sm:400px;--dt-modal-md:560px;--dt-modal-lg:800px;--dt-drawer-w:480px;--dt-overlay-radius:12px;
/* Semantic icons on dark (toasts, video) — ≥3:1 on #1A1A1A */
--sem-danger-on-dark:#FF8A8A;--sem-success-on-dark:#6FD49A;--sem-warning-on-dark:#F5B83D;--sem-info-on-dark:#8EC3EA;
/* Verified mark on light Dashboard/Web surfaces (lavender-400 is 2.3:1 — too faint for an icon) */
--dt-verified:#7563B8;--web-verified:#7563B8; /* 4.9:1 on --web-canvas */
/* Text + icons on ink fills (primary button, selected chip, toast, sent bubble, counts) */
--dt-on-ink:#FFFFFF;
/* Chart + overlay edges (decorative) */
--dt-chart-swatch-edge:rgba(26,26,26,.25);--dt-chart-bar-edge:rgba(26,26,26,.18);--dt-chart-hover-band:rgba(26,26,26,.04);
--web-scrim:rgba(26,26,26,.5);
--video-scrim-soft:rgba(20,18,26,.32);--video-knob-ring:rgba(20,18,26,.35);
/* Hit targets */
--hit-pointer:44px;--hit-touch:48px;
/* Brand Arabic family (same value as App intro.css) and the video frame radius */
--font-arabic:'Almarai',system-ui,sans-serif;--video-radius:24px;
}
/* T5 · Shared foundations. These existing tokens are declared BRAND (usable by App, Dashboard and Web). No new scales:
   spacing --space-1/2/3/4/6/8/10 = 4/8/12/16/24/32/40 · type --font-serif/--font-sans/--font-condensed/--font-arabic, --fw-* · motion --dur-instant/fast/base/toggle/toast/drawer/sheet, --ease-out/standard/emphasized/spring, reduced motion in motion.css. */

/* ---------- Shared state primitives ---------- */
.ij-ctl{box-sizing:border-box;font-family:var(--font-sans);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out);-webkit-tap-highlight-color:transparent}
.ij-ctl:focus-visible,.ij-ctl[data-state="focus"],.ij-focus-within:focus-within,.ij-focus-within[data-state="focus"]{outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.ij-ctl:focus{outline-style:none}.ij-ctl:focus-visible{outline-style:solid}
.ij-hit{position:relative}.ij-hit::after{content:"";position:absolute;inset:50% auto auto 50%;width:max(100%,var(--hit-pointer));height:max(100%,var(--hit-pointer));transform:translate(-50%,-50%)}
@media (pointer:coarse){.ij-hit::after{width:max(100%,var(--hit-touch));height:max(100%,var(--hit-touch))}}

/* ---------- Dashboard button (DtButton) ---------- */
.dtb{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:var(--dt-control-w) solid transparent;border-radius:var(--dt-control-radius);font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none}
.dtb[data-size="sm"]{height:32px;padding:0 var(--space-3);font-size:13px}.dtb[data-size="md"]{height:40px;padding:0 var(--space-4);font-size:var(--dt-body)}.dtb[data-size="lg"]{height:48px;padding:0 var(--space-6);font-size:16px}
.dtb[data-icon-only]{padding:0;aspect-ratio:1}
.dtb[data-variant="primary"]{background:var(--dt-ink);color:var(--dt-on-ink)}
.dtb[data-variant="primary"]:hover,.dtb[data-variant="primary"][data-state="hover"]{background:var(--dt-ink-2)}
.dtb[data-variant="secondary"]{background:var(--dt-pill-fill);color:var(--dt-ink);border-color:transparent}
.dtb[data-variant="secondary"]:hover,.dtb[data-variant="secondary"][data-state="hover"]{background:var(--dt-pill-fill-hover)}
.dtb[data-variant="ghost"]{background:transparent;color:var(--dt-ink)}
.dtb[data-variant="ghost"]:hover,.dtb[data-variant="ghost"][data-state="hover"]{background:var(--dt-hover-fill)}
.dtb[data-variant="destructive"]{background:var(--dt-pill-fill);color:var(--sem-danger-fg)}
.dtb[data-variant="destructive"]:hover,.dtb[data-variant="destructive"][data-state="hover"]{background:var(--dt-pill-fill-hover)}
.dtb[data-variant="danger-text"]{background:none;color:var(--sem-danger-fg);padding-inline:var(--space-2)}
.dtb[data-variant="danger-text"]:hover{background:var(--dt-hover-fill)}
.dtb[data-variant="link"]{background:none;height:auto;padding:0;color:var(--dt-ink);text-decoration:underline;text-underline-offset:3px;border-radius:2px}
.dtb[data-variant="link"]:hover,.dtb[data-variant="link"][data-state="hover"]{color:var(--dt-teal-text)}
.dtb:active,.dtb[data-state="pressed"]{transform:scale(var(--press-scale))}
.dtb[data-variant="secondary"]:active,.dtb[data-variant="destructive"]:active,.dtb[data-variant="secondary"][data-state="pressed"],.dtb[data-variant="destructive"][data-state="pressed"]{background:var(--dt-pill-fill-press)}
.dtb[data-variant="ghost"]:active,.dtb[data-variant="ghost"][data-state="pressed"]{background:var(--dt-press-fill)}
.dtb:disabled,.dtb[aria-disabled="true"]{background:var(--dt-btn-disabled-bg);color:var(--dt-control-text-disabled);border-color:transparent;cursor:not-allowed;transform:none}
.dtb[data-variant="link"]:disabled,.dtb[data-variant="ghost"]:disabled{background:none;border-color:transparent}
.dtb[aria-busy="true"]{cursor:progress}

/* ---------- Dashboard field box (DtTextField, DtSelect, DtPhoneField, DtDateRangeInput, DtTagInput) ---------- */
.dtf{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);background:var(--dt-control-bg);border:var(--dt-control-w) solid var(--dt-control-border);border-radius:var(--dt-control-radius);color:var(--dt-ink);font-size:var(--dt-body)}
.dtf[data-multiline]{align-items:flex-start;padding:10px var(--space-3)}
.dtf:hover,.dtf[data-state="hover"]{border-color:var(--dt-control-border-hover)}
.dtf:focus-within,.dtf[data-state="focus"]{border-color:var(--dt-control-border-selected);outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.dtf[data-invalid]{border-color:var(--dt-control-border-error)}
.dtf[data-valid]{border-color:var(--dt-control-border-success)}
.dtf[data-readonly]{background:var(--dt-control-bg-readonly)}
.dtf[data-disabled]{background:var(--dt-control-bg-disabled);border-color:transparent;color:var(--dt-control-text-disabled);cursor:not-allowed}
.dtf input,.dtf textarea,.dtf select{flex:1 1 0;width:0;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;resize:vertical}
.dtf input::placeholder,.dtf textarea::placeholder{color:var(--dt-faint-text)}
@media (pointer:coarse){.dtf{min-height:48px}}

/* ---------- Dashboard list option (DtSelect, DtMenu) ---------- */
.dto{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border-radius:6px;color:var(--dt-ink);font-size:var(--dt-body);cursor:pointer;user-select:none}
.dto:hover,.dto[data-state="hover"]{background:var(--dt-hover-fill)}
.dto[data-active]{outline:2px solid var(--focus-ring);outline-offset:-2px}
.dto[aria-selected="true"]{font-weight:600;background:var(--dt-selected-fill)}
.dto[aria-disabled="true"]{color:var(--dt-control-text-disabled);cursor:not-allowed;background:none}
.dto[data-danger]{color:var(--sem-danger-fg)}
.dto:active,.dto[data-state="pressed"]{background:var(--dt-press-fill)}
@media (pointer:coarse){.dto{min-height:48px}}

/* ---------- Dashboard check / radio / switch ---------- */
.dtc{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border:1.5px solid var(--dt-control-border-strong);background:var(--dt-control-bg);color:var(--dt-on-ink)}
.dtc[data-kind="checkbox"]{border-radius:4px}.dtc[data-kind="radio"]{border-radius:50%}
label:hover>.dtc,.dtc[data-state="hover"]{border-color:var(--dt-ink-2)}
.dtc[data-on]{background:var(--dt-ink);border-color:var(--dt-ink)}
.dtc[data-kind="radio"][data-on]{background:var(--dt-control-bg);box-shadow:inset 0 0 0 4px var(--dt-control-bg),inset 0 0 0 10px var(--dt-ink)}
.dtc[data-invalid]{border-color:var(--dt-control-border-error)}
.dtc[data-disabled]{background:var(--dt-control-bg-disabled);border-color:var(--dt-control-border-disabled)}
.dtc[data-disabled][data-on]{background:var(--dt-control-border-disabled)}
input:focus-visible+.dtc,.dtc[data-state="focus"]{outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.dts{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:var(--dt-pill-fill-press);border:1.5px solid transparent;box-sizing:border-box;transition:background-color var(--dur-toggle) var(--ease-out)}
.dts::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:17px;height:17px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(26,26,26,.25);transition:inset-inline-start var(--dur-toggle) var(--ease-spring),background-color var(--dur-toggle)}
.dts[data-on]{background:var(--dt-teal-900);border-color:var(--dt-teal-900)}.dts[data-on]::after{inset-inline-start:18px;background:var(--dt-on-ink)}
label:hover>.dts:not([data-on]),.dts[data-state="hover"]:not([data-on]){background:var(--dt-control-border-hover)}
.dts[data-invalid]{border-color:var(--dt-control-border-error)}
.dts[data-disabled]{background:var(--dt-control-bg-disabled);border-color:var(--dt-control-border-disabled)}.dts[data-disabled][data-on]{background:var(--dt-control-border-disabled)}
input:focus-visible+.dts,.dts[data-state="focus"]{outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
@media (pointer:coarse){.dtcheck-row{min-height:48px!important}}
.ij-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Chips, tabs, segmented ---------- */
.dtchip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--space-3);border-radius:999px;border:var(--dt-control-w) solid var(--dt-control-border);background:var(--dt-control-bg);color:var(--dt-ink);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.dtchip:hover,.dtchip[data-state="hover"]{border-color:var(--dt-control-border-hover);background:var(--dt-hover-fill)}
.dtchip[aria-pressed="true"],.dtchip[data-selected]{background:var(--dt-selected-fill);border-color:var(--dt-selected-border);color:var(--dt-ink)}
.dtchip:active,.dtchip[data-state="pressed"]{transform:scale(var(--press-scale))}
.dtchip:disabled,.dtchip[data-disabled]{background:var(--dt-control-bg-disabled);border-color:var(--dt-control-border-disabled);color:var(--dt-control-text-disabled);cursor:not-allowed}
.dtchip[data-invalid]{border-color:var(--dt-control-border-error);color:var(--sem-danger-fg)}
.dttab{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 2px;border:none;background:none;color:var(--dt-muted);font-size:var(--dt-tab);font-weight:500;cursor:pointer}
.dttab::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;border-radius:2px;background:transparent}
.dttab:hover,.dttab[data-state="hover"]{color:var(--dt-ink)}.dttab:hover::after,.dttab[data-state="hover"]::after{background:var(--dt-control-border)}
.dttab[aria-selected="true"]{color:var(--dt-ink);font-weight:600}.dttab[aria-selected="true"]::after{background:var(--dt-ink)}
.dttab:disabled{color:var(--dt-control-text-disabled);cursor:not-allowed;opacity:.7}.dttab:disabled::after{background:none}
.dttab:active,.dttab[data-state="pressed"]{color:var(--dt-ink)}.dttab:active::after,.dttab[data-state="pressed"]::after{background:var(--dt-ink-2)}
@media (pointer:coarse){.dttab{height:48px}}
.dtseg{display:inline-flex;padding:3px;gap:2px;border-radius:var(--dt-control-radius);background:var(--dt-pill-fill);border:none}
.dtseg>button{position:relative;height:36px;min-width:64px;padding:0 var(--space-3);border:none;border-radius:7px;background:transparent;color:var(--dt-ink-2);font-size:13px;font-weight:600;cursor:pointer}
.dtseg>button:hover,.dtseg>button[data-state="hover"]{background:var(--dt-hover-fill)}
.dtseg>button[aria-checked="true"],.dtseg>button[aria-pressed="true"]{background:var(--dt-control-bg);color:var(--dt-ink);box-shadow:var(--dt-shadow-raise)}
.dtseg>button:disabled{color:var(--dt-control-text-disabled);cursor:not-allowed;background:none}
.dtseg>button:active,.dtseg>button[data-state="pressed"]{background:var(--dt-press-fill)}
/* 36px visual, 44px pointer / 48px touch target */
.dtseg>button::after{content:"";position:absolute;inset:-4px 0}
@media (pointer:coarse){.dtseg>button::after{inset:-6px 0}}

/* ---------- Web field box + option (Web* form set) ---------- */
.wbf{display:flex;align-items:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-4);background:var(--web-control-bg);border:2px solid var(--web-control-border);border-radius:var(--web-radius-input);color:var(--web-ink);font-size:var(--web-fs-body)}
.wbf[data-multiline]{align-items:flex-start;padding:12px var(--space-4)}
.wbf:hover,.wbf[data-state="hover"]{border-color:var(--web-control-border-hover)}
.wbf:focus-within,.wbf[data-state="focus"]{border-color:var(--web-control-border-selected);outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.wbf[data-invalid]{border-color:var(--web-control-border-error)}
.wbf[data-disabled]{background:var(--web-control-bg-disabled);border-color:var(--web-control-border-disabled);color:var(--web-control-text-disabled);cursor:not-allowed}
.wbf input,.wbf textarea,.wbf select{flex:1 1 0;width:0;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;resize:vertical}
.wbf input::placeholder,.wbf textarea::placeholder{color:var(--web-caption)}
.wbo{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border-radius:8px;cursor:pointer;color:var(--web-ink)}
.wbo:hover,.wbo[data-state="hover"]{background:var(--web-hover-fill)}.wbo[data-active]{outline:2px solid var(--focus-ring);outline-offset:-2px}.wbo[aria-selected="true"]{font-weight:600;background:var(--web-swirl)}.wbo[aria-disabled="true"]{color:var(--web-control-text-disabled);cursor:not-allowed}
.wbr{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--web-control-border);background:var(--web-control-bg)}
.wbr[data-on]{border-color:var(--web-ink);box-shadow:inset 0 0 0 4px var(--web-control-bg),inset 0 0 0 10px var(--web-ink)}
label:hover>.wbr,.wbr[data-state="hover"]{border-color:var(--web-control-border-hover)}.wbr[data-invalid]{border-color:var(--web-control-border-error)}.wbr[data-disabled]{background:var(--web-control-bg-disabled);border-color:var(--web-control-border-disabled)}
input:focus-visible+.wbr,.wbr[data-state="focus"]{outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
/* Web chip + checkbox (WebSelect multi) */
.wbchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--space-3);border-radius:var(--web-radius-tag);border:2px solid var(--web-control-border);background:var(--web-swirl);color:var(--web-ink);font-size:13px;font-weight:500;white-space:nowrap}
.wbchip[data-disabled]{background:var(--web-control-bg-disabled);border-color:var(--web-control-border-disabled);color:var(--web-control-text-disabled)}
.wbchip[data-invalid]{border-color:var(--web-control-border-error);color:var(--sem-danger-fg)}
.wbc{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--web-control-border);background:var(--web-control-bg);color:var(--web-canvas)}
.wbc[data-on]{background:var(--web-ink);border-color:var(--web-ink)}.wbc[data-disabled]{background:var(--web-control-bg-disabled);border-color:var(--web-control-border-disabled)}
/* Web icon button (WebModal close/back) + pressable web button */
.wbicon{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:2px solid transparent;border-radius:12px;background:transparent;color:var(--web-ink);cursor:pointer}
.wbicon:hover,.wbicon[data-state="hover"]{background:var(--web-hover-fill);border-color:var(--web-control-border)}
.wbicon:active,.wbicon[data-state="pressed"],.wbbtn:active,.wbbtn[data-state="pressed"]{transform:scale(var(--press-scale))}
.wbcard{transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out)}
.wbcard:hover,.wbcard[data-state="hover"]{border-color:var(--web-ink)}.wbcard:active,.wbcard[data-state="pressed"]{transform:scale(var(--press-scale))}
.wbcard:has(.wbcard-link:focus-visible),.wbcard:has([data-state="focus"].wbcard-link){outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}

/* ---------- CONTROLS.md v2 additions (Dt layer: dashboard + candidate web app) ---------- */
/* Selectable option card (Wispr "Where did you hear about us"): hairline at rest, tint + ink edge when selected */
.dtopt{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:52px;padding:var(--space-3) var(--space-4);background:var(--dt-control-bg);border:var(--dt-control-w) solid var(--dt-control-border);border-radius:12px;color:var(--dt-ink);font:inherit;text-align:start;cursor:pointer;box-sizing:border-box}
.dtopt:hover,.dtopt[data-state="hover"]{border-color:var(--dt-control-border-hover)}
.dtopt[aria-checked="true"],.dtopt[aria-pressed="true"],.dtopt[data-selected]{background:var(--dt-selected-fill);border-color:var(--dt-selected-border)}
/* Card: fill does the grouping. Never an ink edge; never fill + border + shadow together */
.dtcard{background:var(--dt-card);border-radius:12px;padding:var(--space-6)}
.dtcard[data-tone="white"]{background:var(--dt-canvas);border:1px solid var(--dt-card-border)}
/* Upload drop zone */
.dtdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);min-height:140px;padding:var(--space-6);background:var(--dt-card);border:1px dashed var(--dt-control-border-hover);border-radius:12px;color:var(--dt-ink-2);text-align:center;cursor:pointer}
.dtdrop:hover,.dtdrop[data-state="hover"],.dtdrop[data-dragover]{border-color:var(--dt-ink-2);background:var(--dt-hover-fill)}
/* Status pill: semantic fill + fg, no border */
.dtstatus{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 var(--space-2);border-radius:999px;font-size:12px;font-weight:600;background:var(--sem-neutral-bg);color:var(--sem-neutral-fg);white-space:nowrap}
.dtstatus[data-tone="success"]{background:var(--sem-success-bg);color:var(--sem-success-fg)}.dtstatus[data-tone="info"]{background:var(--sem-info-bg);color:var(--sem-info-fg)}.dtstatus[data-tone="warning"]{background:var(--sem-warning-bg);color:var(--sem-warning-fg)}.dtstatus[data-tone="danger"]{background:var(--sem-danger-bg);color:var(--sem-danger-fg)}
/* Table frame: hairline only */
.dttable{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--dt-card-border);border-radius:12px;overflow:hidden;font-size:var(--dt-body)}
.dttable th{padding:var(--space-3) var(--space-4);text-align:start;font-size:var(--dt-label);letter-spacing:var(--dt-label-track);text-transform:uppercase;color:var(--dt-faint-text);font-weight:600;background:var(--dt-card)}
.dttable td{padding:var(--space-3) var(--space-4);border-top:1px solid var(--dt-card-border);vertical-align:middle}
/* Text-link action (View activity, Edit setup): ink, underline on hover. Never teal unless Hunter. */
.dtlink{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;border:none;background:none;color:var(--dt-ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.dtlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Overlays + feedback ---------- */
@keyframes ij-spin{to{transform:rotate(360deg)}}
.ij-spin{animation:ij-spin 800ms linear infinite}
@keyframes ij-typing{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.ij-typing>span{animation:ij-typing 1200ms var(--ease-standard) infinite}.ij-typing>span:nth-child(2){animation-delay:150ms}.ij-typing>span:nth-child(3){animation-delay:300ms}
@keyframes ij-modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.ij-anim-modal{animation:ij-modal-in var(--dur-base) var(--ease-out) both}
.dtrow:hover,.dtrow[data-state="hover"]{background:var(--dt-hover-fill)}.dtrow[aria-selected="true"]{background:var(--dt-selected-fill)}
.dtpop-item:hover{background:var(--dt-hover-fill)}
.dtrow-open{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer;border-radius:4px}.dtrow-open:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.ij-spin{animation-duration:2400ms!important;animation-iteration-count:infinite!important}.ij-typing>span,.ij-anim-modal{animation:none!important}}
.ij-reduced .ij-typing>span,.ij-reduced .ij-anim-modal{animation:none!important}
/* Page header: stacks actions under the title below 768px */
.dtph{container-type:inline-size}
@container (max-width:720px){.dtph-row{flex-direction:column;align-items:stretch!important}.dtph-actions{justify-content:flex-start!important}}

/* Data table: low-priority columns drop below ~900px container width */
.dttable-wrap{container-type:inline-size}
@container (max-width:900px){.dt-col-low{display:none}}
@keyframes ij-indet{from{transform:translateX(calc(-100% * var(--dir-x)))}to{transform:translateX(calc(300% * var(--dir-x)))}}

/* ---------- Direction + motion helpers for Dt/Web (so foundations.css needs nothing from App intro.css/base.css) ---------- */
:root,[dir="ltr"]{--dir-x:1; /* @kind other */
}[dir="rtl"]{--dir-x:-1; /* @kind other */
}
[dir="rtl"] .ij-dir{transform:scaleX(-1)}
/* Arabic for Dt/Web (same values as App intro.css/base.css, repeated so foundations.css works on its own) */
[dir="rtl"]{--font-serif:'Almarai','EB Garamond',serif;--font-sans:'Almarai','Figtree',system-ui,sans-serif;--tracking-serif:0em;--fw-display:700; /* @kind font */
--lh-scale:1.3; /* @kind font */
--fs-tab:13px;--fs-badge:13px;--fs-caption:13px;--fs-footnote:13px;--web-fs-body:17px;--web-fs-small:15px}
[dir="rtl"] em,[dir="rtl"] i{font-style:normal}
[dir="rtl"] *{letter-spacing:0!important;text-transform:none!important}
.ij-ltr,[dir="rtl"] bdi{direction:ltr;unicode-bidi:isolate}
@keyframes dt-slide-end{from{opacity:0;transform:translateX(calc(16px * var(--dir-x)))}to{opacity:1;transform:none}}
.dt-anim-slide-end{animation:dt-slide-end var(--dur-base) var(--ease-out) both}
@keyframes dt-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.dt-skeleton{background:linear-gradient(90deg,var(--dt-chrome) 0%,var(--dt-chrome) 35%,var(--dt-card-border) 50%,var(--dt-chrome) 65%,var(--dt-chrome) 100%);background-size:200% 100%;animation:dt-shimmer 1600ms linear infinite}
@media (prefers-reduced-motion:reduce){.dt-skeleton,.dt-anim-slide-end{animation:none!important}}
.ij-reduced .dt-skeleton,.ij-reduced .dt-anim-slide-end{animation:none!important}

/* ---------- Hover for clickable rows, cards and tiles (SYSTEM.md §6b). Cream on light, lift on video. Buttons keep their own hover. ---------- */
.ij-hover{transition:background-color var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out);cursor:pointer}
@media (hover:hover){.ij-hover:hover:not(:disabled):not([aria-pressed="true"]):not([aria-selected="true"]){background-color:var(--role-highlight-soft)!important}.ij-hover-media:hover{filter:brightness(1.12)}}
.ij-hover-media{transition:filter var(--dur-fast) var(--ease-out);cursor:pointer}
@media (prefers-reduced-motion:reduce){.ij-hover,.ij-hover-media{transition:none}}
.ij-reduced .ij-hover,.ij-reduced .ij-hover-media{transition:none}

/* ds/introjobs20designsystem_67841a/tokens/base.css */
.wf-serif{font-family:var(--font-serif);font-weight:400;letter-spacing:var(--tracking-serif);color:var(--text-primary)}
.wf-accent-lilac{color:var(--serif-lilac)}.wf-accent-marigold{color:var(--marigold)}
a{color:var(--link);text-decoration:none}a:hover{color:var(--lavender-700)}

.ij-serif-em em{font-style:italic}
[dir="rtl"] .ij-dir{transform:scaleX(-1)}
[dir="rtl"] *{letter-spacing:0!important;text-transform:none!important}
[dir="rtl"] em,[dir="rtl"] i{font-style:normal}
[dir="rtl"] em:not([style*="color"]){color:var(--serif-lilac)}
.ij-ltr,[dir="rtl"] bdi{direction:ltr;unicode-bidi:isolate}