/* Redesign styles, in cascade order. Screen styles are imported by their screens. *//* manrope-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAn4ABMAAAAAEwQAAAmOAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGjQbgnQcLj9IVkFSgQEGYD9TVEFUgQIAgQovahEICok0h0ULIAAwhzoBNgIkAzwEIAWHJgeBDgwHG6QQUdRKTmoBFD8K42bniObKrG3LZFcMWZzFmrjTFhQ6TVTqPJcInrfrvzq3b2PGn1wwMiNYGTy9ViREYARlL1zAGcPdPqBt3gNWrfKthv4xnM+b9caw+wmjgEUVRjHXhS6jgCK6zf5HiWQacJpGdAgdrbV6g/Rf1BfxRqZVQnrxRVWSJb6RLFnyu0elilmjeoSQCKnxsmwLaddUMjnksriSYuuPl06EAl7KfAiWQjCUETz0zNZ3EII94CDQtzkMfZ/9IkkY8tZRZTDky5ZVwBAM+GYpdd4ZVAWYImnLkiTg48l79gGx3D+VBtLeyg8u7bJAd4uo0pFuQBFysE9C95l0W4Fkiao6GfrDbu77lVU7wk9cV3uqOsXmQiMkhVKl1ugjzUAJBSIkkVWHijkpkVSyUFsgVBuJMA0N+ZnXtyUv5yMigGdfQRmwL1AAjQ3YXG6iIFNSUdPQo8+AISPGAltBMDQRAtyf4ZspLlZkpyOVoMZPvFGWzvk8p5SUC/NWPMj6T2/Yas2EdlON5GkfdkeFwVGjta825H89NIenlLWAPAp5h1KDtRhCaAQWMsFKtEvOKpIhgLHlXPARokkgEGEOAkqxJRQpKYq4ezahIiLHP6hZpqMbV0pUF2vdvEimLEQ/iIUYLgYWs0VXGVlLTOPdaPmFfCC/XrtzqVo1ez7vz6+Kd2+7o11ZJ+4MreLbB5BKVGxobAq4jZYalZ5aX2CKJiwUuc9GNJyi4M8bGyKcdjSRrG4JohdF8buJfmQefbYYREnMFsOoiNliFDVxmRgL0XUmUMLqzW0A4gCQAhWGYCQpFNukwXhIkPMsbRI19ewtw8Cp2Wj/Ro5cM2OTAbJAvZ/L4opBXb9+UHscYuOKM/W8isgwN26Exexjizmfnlp9dE3hOSqdZ/F5QqbckIlPb+oKfXxd6hftJ7Sm/uyPYpONza84CRlMNk/uhOrLpyf53982++zRkXNu3g3VF8qFbx1+7fbHZ9DrB3VXWNSmhnT2vrwS1+1Z+kHGBaZIhnnvuLBTNDeA340D1DWu5/jEa9pVfl6+Jij+yo3EELNixXCLjr173Q5eDP7Y7/L4iQFHbjpaJLFoP4cCsYP6sAPL7gMHNg53yYjqxqTDrYqLDl5DzW/eTLjYxCvucprjI3yl2ykKowKUC2Ox2FJLFo6Fa1HBWLC2jMCIIBEmklkYhmkpmBhTm/LCvJAH5oGcMKcgFEP1xUdho8ANPa6RFD99/PN60fjj9eXy2Eex4B5MpmRapXidzFk1p4uLk3+hn6jAP9ovJcXPPwk8o/0ltizbdbnTprvx4PSxT0VZ3Xc772aN7RflgbXRYwc3hLNO+k878nxGwfuVM8m8Gs7WEoVGWLHwSpx4vNSHBCMNqJ4m15Kp/TfHHVkQd++eY7PGN4W5byTs+6Ft8Ozvb/D60btv37de8ER0mS3P/0sLW84qGjEVkwztPzz06eGUWwKLwPb0D/WFd3vltl2aP276KpM0JNz6AfnAnZ5ADlF2zVyZ2OkxHSMxWPMnSZLbbDR3F1UjPVqp4d68da13F1YZujdWw7271iecO2l9+/4p47Oztjck355/75wFOI+VdGDqbNGs+ISgxg3iB2jb2r+b0CWsNLHIM4sdv8SDSFBP/Oromz6FNCWw2iMTxV0R8QLyBTkpe0j5+pSSJOOTB5Mck/gh3IopuNQnhKj02t3FL80gGbEh89SZcwTxcYt5cZT/nMnB3uXfPy8BSpVMBuRx+ZhACGzDBmwHsJRAjhotOnzuj2wDz3ug2wOUAY2NgZln9/TK/enG/oE4rO1wxvGUFMAxsZ0qNjRC7hl9d17e7imbgDt6uJXhUobDg7v3RX/yRCKxgMhfyiKcZfbpk0wmCcdQlIAOHeakXLvCNt++WfKiozNqSZxxJotn+c0a7DdPsx7DPYgKIDxwwYUZDg9aJbxocTjcwovr9WAsVV32mQoiiIOCHc60Oltst9qCQYuCqN1yHo0Kj60OgI2OqmiuBUWrNA0NDhYCDcdpmMrs1fZZ0xdTzMr1HdPtIHstYhqaPDDA5YxUDx7J4fJiisBSDI/L6G/bn34GNy8Q2g044ZTulAdFLb0tI6NNxfj3DzLjWiNGxje1pz7aXOcNV68lDPEd2SXl6VfBuwmHzdf1gxFy1HvA7pD8I2BnnmyGw852Cg5XbgIdEEGE5UCzen5jTlG6JCU5iajlxVcsXvbcS0SAcg1dcesWJLVK8+hYHOYQ+Pjy+EyVGXP0aPTFagrV9E03hCQvYx+g47KGq+1GsLj8uBIyihNw33YUe8PNC4BOJ3Lm1AglLV3nCuvUdIP+v15tVGbWIwgxLVpPkfpthCGpTKG+oA/DQfsKKvxhScqaN6FuElAUtTKv2UYgOmQegsN/n7njHUju8wM4VTcm+Q8xfX9SFwjTzdVqu95UOWSIGOabH8OGBEba//8Yxl3GcPdP/dMBOoSX/0z5SZmBoLbaPs+9asaMpb36yknKaw6FqWZa6A5vDa02mhkOba1q6KtLV208xrkwmW5C4VD6n2fvRjADy2qDYYnNy+H10Fq0LMbNzS863gkO7iQ8eC48/Ny5m59tOcEso3u7Qg3yrqDL6eKXwJAuWnhylfbWrRObe66rzX59+XDtzusnL66dI/86ArmtLlzED860Ef3bFPV78OX/zFTA11fcBn2Vntb7qiGBSgLBHyuv/uEaqqoTgSpOyjlzh86me1Vriv7i9rLPLvtghWmSnblRbAsBJL/4dScSQTBxOivHMO5QvBBY0iheJvfwWLxLOGzYKZyM4zVc2Cll46zEpeUV4MqGEWZj22SdOxhGAjgs9AEnfT+RoiMfcDb0GS5NncKVxju4Nt/mRk13O9Gz3FLct5oCD6wkwUNrCfHIUg6SMf8LwQGyVaBUqpLPW5BaMpRshEpl8nS1qw5dgnzlik8QBXmdy5UrIH74heTKZKMSilQso4hsRiGraQZRzxpNGqlEJMsXuAU7GlcR8mWSykUpVkWGyIf0a8v4qEQp5CtGsMiZa+4ESYQy+WilCiguHzxMXO54ogShooTV2bj2z1zL6DYSoImoQ8lFUWxMLBNQQgLkV2tHYgUoIbkuREz+fJHKxxWBcnvu3KQppFCxLkguB1NyVSp/TknRvNwYlCdbblWu3ze6owHdWluhE5tgQ6ej2SV65CijijoaRfSiH4Nqz1OpfEW+WeI/oU0ly60zkV9YzOQSYtZVEGYmrysTZAJkY4qZtIBD9/LYTIK7Nww3vMiYBwA=) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/manrope-cyrillic-wght-normal-Dvxsihut.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/manrope-greek-wght-normal-DL7QRZyv.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/manrope-vietnamese-wght-normal-usUDDRr7.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/manrope-latin-ext-wght-normal-Ch3YOpNY.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/manrope-latin-wght-normal-DHIcAJRg.woff2) format('woff2-variations');
  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;
}
/* instrument-serif-latin-ext-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-serif-latin-ext-400-normal-C2je3j2s.woff2) format('woff2'), url(/assets/instrument-serif-latin-ext-400-normal-CFCUzsTy.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-serif-latin-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-serif-latin-400-normal-DnYpCC2O.woff2) format('woff2'), url(/assets/instrument-serif-latin-400-normal-BVbkICAY.woff) format('woff');
  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;
}
/* instrument-serif-latin-ext-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-serif-latin-ext-400-italic-C9HzH3YL.woff2) format('woff2'), url(/assets/instrument-serif-latin-ext-400-italic-D7-lnxEk.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-serif-latin-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-serif-latin-400-italic-DKMiL14s.woff2) format('woff2'), url(/assets/instrument-serif-latin-400-italic-u__WvvIK.woff) format('woff');
  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;
}
/* ================= Design tokens =================
   Default colour theme "Navy": cool light greys, deep navy for actions, a clear blue
   for links and selection, amber for highlights. Other themes (Settings → Colour)
   override only what differs, via html[data-palette]. Light by default; dark follows
   the system unless the user picks one (html[data-theme="light" | "dark"]).
   Instrument Serif for names and big headings, Manrope for everything else. */
:root {
  --font-ui: 'Manrope Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;

  --bg: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #f8faff;
  --surface-3: #ebf0f6;
  --line: #dde4ee;
  --line-strong: #c6d1df;
  --text: #152033;
  --text-2: #4f5b6d;
  --text-3: #687487;
  --on-primary: #ffffff;

  --primary: #12305a;
  --primary-hover: #0c2445;
  --primary-soft: #e6eefb;
  --primary-ink: #1d4fb0;
  --ring: rgba(37, 99, 235, .25);

  --accent: #e0a526;
  --accent-soft: #fdf3dc;
  --accent-ink: #855a04;

  --success: #1d7a52;  --success-soft: #e2f3ea;
  --warning: #955700;  --warning-soft: #fcefd8;
  --danger: #b3372c;   --danger-soft: #fbe9e6;
  --info: #2c5fb3;     --info-soft: #e6eefa;

  /* Pipeline phases (dots, bars, small badges) */
  --ph-introduced: #5d6b8a;
  --ph-biodata: #6754c4;
  --ph-talking: #13808a;
  --ph-meeting: #2f63c4;
  --ph-decision: #b06418;
  --ph-finalized: #b23b67;
  --ph-closed: #8a8f97;
  --ph-rejected: #b3372c;

  /* Monogram tints (background, text) */
  --tint-1: #e4ecf8; --tint-1-ink: #24508f;
  --tint-2: #f6e8cf; --tint-2-ink: #7a4d05;
  --tint-3: #dcefe5; --tint-3-ink: #20603f;
  --tint-4: #e8e5f6; --tint-4-ink: #4a3f8f;
  --tint-5: #f6e2e6; --tint-5-ink: #8c3149;
  --tint-6: #dcedf1; --tint-6-ink: #1c5a69;

  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(18, 32, 56, .05);
  --sh-2: 0 1px 2px rgba(18, 32, 56, .04), 0 10px 28px rgba(18, 32, 56, .07);
  --sh-3: 0 24px 64px rgba(18, 32, 56, .20), 0 4px 14px rgba(18, 32, 56, .08);
  --scrim: rgba(12, 22, 38, .42);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .15s; --t: .22s; --t-slow: .32s;

  --sidebar-w: 248px;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

/* ---------- Dark (Navy) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d141e; --surface: #141c28; --surface-2: #19222f; --surface-3: #202a39;
    --line: #283345; --line-strong: #37445a;
    --text: #e8edf5; --text-2: #b1bccc; --text-3: #8f9cb0;
    --on-primary: #0a1729; --primary: #9cc0ff; --primary-hover: #b6d1ff; --primary-soft: #1a2a44; --primary-ink: #a9c7ff; --ring: rgba(156, 192, 255, .35);
    --accent: #f0bc4d; --accent-soft: #3a2d12; --accent-ink: #f5cf7e;
    --success: #6fcf9c; --success-soft: #133024; --warning: #f2b14c; --warning-soft: #3a2a10;
    --danger: #f08a80; --danger-soft: #3c1a18; --info: #8db4f2; --info-soft: #172840;
    --ph-introduced: #a3b0c8; --ph-biodata: #a99bf2; --ph-talking: #5cc6cf; --ph-meeting: #82a9f5;
    --ph-decision: #ecab62; --ph-finalized: #f08fb3; --ph-closed: #a3a8b0; --ph-rejected: #f08a80;
    --tint-1: #1f2f4a; --tint-1-ink: #a9c7ff; --tint-2: #3a2e15; --tint-2-ink: #f2cb80; --tint-3: #183428; --tint-3-ink: #9fdcb9;
    --tint-4: #272747; --tint-4-ink: #bdb8f5; --tint-5: #3b2129; --tint-5-ink: #f3b4c4; --tint-6: #173139; --tint-6-ink: #9ad6e4;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .3); --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
    --sh-3: 0 24px 64px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35); --scrim: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d141e; --surface: #141c28; --surface-2: #19222f; --surface-3: #202a39;
  --line: #283345; --line-strong: #37445a;
  --text: #e8edf5; --text-2: #b1bccc; --text-3: #8f9cb0;
  --on-primary: #0a1729; --primary: #9cc0ff; --primary-hover: #b6d1ff; --primary-soft: #1a2a44; --primary-ink: #a9c7ff; --ring: rgba(156, 192, 255, .35);
  --accent: #f0bc4d; --accent-soft: #3a2d12; --accent-ink: #f5cf7e;
  --success: #6fcf9c; --success-soft: #133024; --warning: #f2b14c; --warning-soft: #3a2a10;
  --danger: #f08a80; --danger-soft: #3c1a18; --info: #8db4f2; --info-soft: #172840;
  --ph-introduced: #a3b0c8; --ph-biodata: #a99bf2; --ph-talking: #5cc6cf; --ph-meeting: #82a9f5;
  --ph-decision: #ecab62; --ph-finalized: #f08fb3; --ph-closed: #a3a8b0; --ph-rejected: #f08a80;
  --tint-1: #1f2f4a; --tint-1-ink: #a9c7ff; --tint-2: #3a2e15; --tint-2-ink: #f2cb80; --tint-3: #183428; --tint-3-ink: #9fdcb9;
  --tint-4: #272747; --tint-4-ink: #bdb8f5; --tint-5: #3b2129; --tint-5-ink: #f3b4c4; --tint-6: #173139; --tint-6-ink: #9ad6e4;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3); --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
  --sh-3: 0 24px 64px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35); --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ================= Other colour themes =================
   Each sets its light values, and its dark values with higher specificity, so the
   dark block always wins in dark mode. */

/* Emerald: fresh green actions on cool greys */
:root[data-palette="emerald"] {
  --bg: #f3f7f5; --surface-2: #f7fbf9; --surface-3: #e8f0ec; --line: #dce7e1; --line-strong: #c4d4cb;
  --primary: #0e5e45; --primary-hover: #0a4a36; --primary-soft: #e1f2ea; --primary-ink: #0d6a4d; --ring: rgba(14, 94, 69, .25);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="emerald"]:not([data-theme="light"]) {
    --bg: #0c1613; --surface: #121d19; --surface-2: #17221e; --surface-3: #1d2a25; --line: #263630; --line-strong: #34483f;
    --on-primary: #05261b; --primary: #6dd6ac; --primary-hover: #8ae0bd; --primary-soft: #143026; --primary-ink: #86e0bd; --ring: rgba(109, 214, 172, .35);
  }
}
:root[data-palette="emerald"][data-theme="dark"] {
  --bg: #0c1613; --surface: #121d19; --surface-2: #17221e; --surface-3: #1d2a25; --line: #263630; --line-strong: #34483f;
  --on-primary: #05261b; --primary: #6dd6ac; --primary-hover: #8ae0bd; --primary-soft: #143026; --primary-ink: #86e0bd; --ring: rgba(109, 214, 172, .35);
}

/* Indigo: deep violet-blue actions */
:root[data-palette="indigo"] {
  --bg: #f4f4fa; --surface-2: #f9f9fe; --surface-3: #ececf6; --line: #e0e0ee; --line-strong: #cbcbe0;
  --primary: #3f36b8; --primary-hover: #322a96; --primary-soft: #ecebfc; --primary-ink: #4038c0; --ring: rgba(63, 54, 184, .25);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="indigo"]:not([data-theme="light"]) {
    --bg: #0f0f1a; --surface: #151522; --surface-2: #1a1a28; --surface-3: #212131; --line: #2b2b3f; --line-strong: #3b3b55;
    --on-primary: #14134a; --primary: #aab4ff; --primary-hover: #c2caff; --primary-soft: #22234a; --primary-ink: #c0c8ff; --ring: rgba(170, 180, 255, .35);
  }
}
:root[data-palette="indigo"][data-theme="dark"] {
  --bg: #0f0f1a; --surface: #151522; --surface-2: #1a1a28; --surface-3: #212131; --line: #2b2b3f; --line-strong: #3b3b55;
  --on-primary: #14134a; --primary: #aab4ff; --primary-hover: #c2caff; --primary-soft: #22234a; --primary-ink: #c0c8ff; --ring: rgba(170, 180, 255, .35);
}

/* Graphite: black and white, colour only where it carries meaning */
:root[data-palette="graphite"] {
  --bg: #f4f4f5; --surface-2: #fafafa; --surface-3: #ececee; --line: #e2e2e5; --line-strong: #cdcdd2;
  --text: #18181b; --text-2: #52525b; --text-3: #6b6b74;
  --primary: #1c1c20; --primary-hover: #000000; --primary-soft: #ebebee; --primary-ink: #1c1c20; --ring: rgba(28, 28, 32, .22);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:not([data-theme="light"]) {
    --bg: #111113; --surface: #18181b; --surface-2: #1c1c1f; --surface-3: #242428; --line: #2e2e33; --line-strong: #3f3f46;
    --text: #f1f1f3; --text-2: #b9b9c0; --text-3: #9b9ba3;
    --on-primary: #141416; --primary: #f1f1f3; --primary-hover: #ffffff; --primary-soft: #2a2a2f; --primary-ink: #f1f1f3; --ring: rgba(241, 241, 243, .3);
  }
}
:root[data-palette="graphite"][data-theme="dark"] {
  --bg: #111113; --surface: #18181b; --surface-2: #1c1c1f; --surface-3: #242428; --line: #2e2e33; --line-strong: #3f3f46;
  --text: #f1f1f3; --text-2: #b9b9c0; --text-3: #9b9ba3;
  --on-primary: #141416; --primary: #f1f1f3; --primary-hover: #ffffff; --primary-soft: #2a2a2f; --primary-ink: #f1f1f3; --ring: rgba(241, 241, 243, .3);
}

/* Plum: the warm first version (plum actions on warm off-white, marigold highlights) */
:root[data-palette="plum"] {
  --bg: #f6f4f1; --surface-2: #fbf9f7; --surface-3: #f1ede8; --line: #e7e2dc; --line-strong: #d6cec5;
  --text: #1d1a1f; --text-2: #57515d; --text-3: #716a77;
  --primary: #7b2d4f; --primary-hover: #66233f; --primary-soft: #f6e9ef; --primary-ink: #6a2443; --ring: rgba(123, 45, 79, .28);
  --accent: #d99a2b; --accent-soft: #fbf0dc;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="plum"]:not([data-theme="light"]) {
    --bg: #131015; --surface: #1c181e; --surface-2: #221d24; --surface-3: #2a242c; --line: #322b34; --line-strong: #463d48;
    --text: #f3eef1; --text-2: #c4bbc3; --text-3: #a59ca6;
    --on-primary: #2b0e1c; --primary: #e896b4; --primary-hover: #f2abc4; --primary-soft: #3a2131; --primary-ink: #f5bcd0; --ring: rgba(232, 150, 180, .35);
    --accent: #e8b04d; --accent-soft: #3a2c14;
  }
}
:root[data-palette="plum"][data-theme="dark"] {
  --bg: #131015; --surface: #1c181e; --surface-2: #221d24; --surface-3: #2a242c; --line: #322b34; --line-strong: #463d48;
  --text: #f3eef1; --text-2: #c4bbc3; --text-3: #a59ca6;
  --on-primary: #2b0e1c; --primary: #e896b4; --primary-hover: #f2abc4; --primary-soft: #3a2131; --primary-ink: #f5bcd0; --ring: rgba(232, 150, 180, .35);
  --accent: #e8b04d; --accent-soft: #3a2c14;
}
/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); }
body {
  font-family: var(--font-ui);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
body.no-scroll { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--primary-ink); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--primary-soft); color: var(--text); }
p, .pretty { text-wrap: pretty; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stack { display: flex; flex-direction: column; }
.hstack { display: flex; align-items: center; }
.spacer { flex: 1; }
kbd {
  font: inherit; font-size: 11.5px; font-weight: 650; line-height: 18px; padding: 0 6px;
  border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2);
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200; padding: 8px 12px; border-radius: 10px;
  background: var(--text); color: var(--bg); text-decoration: none; font-weight: 650;
}
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: #fff; }
}

/* ================= Shell: sidebar (desktop), top bar + tab bar (phone) ================= */
.shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } }

.sidebar { display: none; }
@media (min-width: 1024px) {
  .sidebar {
    display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100dvh;
    padding: 20px 14px 16px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto;
  }
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; min-width: 0; text-decoration: none; color: inherit; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--primary); color: var(--on-primary);
}
.brand-name { font-family: var(--font-display); font-size: 23px; line-height: 1; letter-spacing: -.01em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  margin: 10px 12px 4px; font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3);
}
.nav-item {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 11px;
  color: var(--text-2); font-weight: 650; font-size: 14px; text-decoration: none; text-align: left; width: 100%;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item[aria-current="page"], .nav-item[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-ink); }
.nav-item .count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nav-item .count.alert { color: #fff; background: var(--danger); border-radius: var(--r-pill); padding: 0 7px; line-height: 19px; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

.main { min-width: 0; padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 28px); }
@media (min-width: 1024px) { .main { padding-bottom: 48px; } }

.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px;
  min-height: calc(56px + var(--safe-t)); padding: var(--safe-t) 8px 0 16px;
  background: var(--bg); border-bottom: 1px solid transparent; transition: border-color var(--t);
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar-title { flex: 1; min-width: 0; font-weight: 750; font-size: 16px; opacity: 0; transition: opacity var(--t); }
.topbar.scrolled .topbar-title { opacity: 1; }
@media (min-width: 1024px) { .topbar { display: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--surface); border-top: 1px solid var(--line);
}
@media (min-width: 1024px) { .tabbar { display: none; } }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; color: var(--text-3); text-decoration: none; position: relative;
}
.tab-icon { width: 56px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; transition: background var(--t), color var(--t); }
.tab[aria-current="page"] { color: var(--primary-ink); }
.tab[aria-current="page"] .tab-icon { background: var(--primary-soft); }
.tab .tab-dot { position: absolute; top: 8px; left: calc(50% + 10px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: 10.5px; line-height: 16px; text-align: center; }

.fab {
  position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); z-index: 41;
  width: 58px; height: 58px; border-radius: 19px; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); box-shadow: var(--sh-2); transition: transform .12s, background var(--t-fast);
}
.fab:hover { background: var(--primary-hover); }
.fab:active { transform: scale(.96); }
@media (min-width: 1024px) { .fab { display: none; } }

/* ================= Pages ================= */
.page { max-width: 1120px; margin: 0 auto; padding: 8px 16px 0; }
.page.wide { max-width: none; }
@media (min-width: 768px) { .page { padding: 24px 28px 0; } }
@media (min-width: 1024px) { .page { padding: 36px 40px 0; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-kicker { font-size: 13.5px; font-weight: 650; color: var(--text-2); margin-bottom: 4px; }
.page-title { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.04; letter-spacing: -.015em; }
@media (min-width: 768px) { .page-title { font-size: 46px; } }
.page-sub { margin-top: 8px; color: var(--text-2); font-size: 15px; max-width: 60ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.section { margin-top: 28px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 32px; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.section-title .n { color: var(--text-3); font-weight: 650; letter-spacing: 0; }
.section-title-lg { font-size: 19px; font-weight: 750; letter-spacing: -.01em; color: var(--text); text-transform: none; }

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: 14.5px; line-height: 1.1;
  white-space: nowrap; text-decoration: none; user-select: none; -webkit-user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform .1s, box-shadow var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-soft { background: var(--primary-soft); color: var(--primary-ink); }
.btn-soft:hover { filter: brightness(.97); }
.btn-ghost { color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { filter: brightness(.97); }
.btn-solid-danger { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .btn-solid-danger { color: #2a0b0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-solid-danger { color: #2a0b0b; } }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; gap: 6px; }
.btn-lg { min-height: 52px; padding: 0 20px; font-size: 15.5px; border-radius: 14px; }
.btn-block { width: 100%; }
@media (pointer: fine) { .btn { min-height: 40px; } .btn-sm { min-height: 32px; } .btn-lg { min-height: 48px; } }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn.sm { width: 36px; height: 36px; border-radius: 10px; }
.icon-btn.bordered { border: 1px solid var(--line); background: var(--surface); }

/* One-tap actions (Today agenda, proposal header) */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.qa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 4px;
  border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 12.5px; font-weight: 700;
  text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), transform .1s;
}
.qa:hover { background: var(--surface-3); border-color: var(--line-strong); }
.qa:active { transform: scale(.98); }
.qa svg { color: var(--primary-ink); }
.qa.done svg { color: var(--success); }
.qa[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ================= Chips, pills, badges ================= */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 650; font-size: 13.5px; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip[aria-pressed="true"], .chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip .n { font-size: 12px; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.chip .dot { width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--text-3)); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--text-2);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-active, .st-active { background: var(--success-soft); color: var(--success); }
.s-waiting, .st-waiting { background: var(--warning-soft); color: var(--warning); }
.s-hold, .st-hold { background: var(--info-soft); color: var(--info); }
.s-final, .st-final { background: var(--primary-soft); color: var(--primary-ink); }
.s-closed, .st-closed { background: var(--surface-3); color: var(--text-2); }
.s-rejected, .st-rejected { background: var(--danger-soft); color: var(--danger); }

.due { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.due-overdue { background: var(--danger-soft); color: var(--danger); }
.due-today { background: var(--warning-soft); color: var(--warning); }
.due-soon { background: var(--info-soft); color: var(--info); }

.phase-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.phase-tag::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex-shrink: 0; }

.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 750; background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.badge.alert { background: var(--danger); color: #fff; }

/* ================= Cards, lists ================= */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card-pad { padding: 16px; }
@media (min-width: 768px) { .card-pad { padding: 20px; } }
.card-link { cursor: pointer; text-align: left; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t) var(--ease); }
.card-link:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.card-title { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }

.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left;
  border-top: 1px solid var(--line); background: transparent; transition: background var(--t-fast); color: inherit; text-decoration: none;
}
.row:first-child { border-top: 0; }
button.row:hover, a.row:hover { background: var(--surface-2); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-weight: 750; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-trail { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ================= Avatar (monogram or photo) ================= */
.avatar {
  --tint-bg: var(--tint-1); --tint-ink: var(--tint-1-ink);
  position: relative; flex-shrink: 0; display: inline-grid; place-items: center; overflow: hidden;
  width: 44px; height: 44px; border-radius: 14px; background: var(--tint-bg); color: var(--tint-ink);
  font-family: var(--font-display); font-size: 21px; line-height: 1; letter-spacing: .01em; user-select: none;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.xs { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
.avatar.sm { width: 36px; height: 36px; border-radius: 11px; font-size: 17px; }
.avatar.lg { width: 56px; height: 56px; border-radius: 17px; font-size: 26px; }
.avatar.xl { width: 88px; height: 88px; border-radius: 26px; font-size: 40px; }
.avatar.xxl { width: 112px; height: 112px; border-radius: 32px; font-size: 50px; }
.avatar.round { border-radius: 50%; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* ================= Segmented, switch, stars ================= */
.segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: 12px; background: var(--surface-3); }
.segmented button {
  height: 34px; padding: 0 14px; border-radius: 9px; font-weight: 700; font-size: 13.5px; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

.switch {
  position: relative; flex-shrink: 0; width: 48px; height: 30px; border-radius: var(--r-pill); background: var(--line-strong);
  transition: background var(--t) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--t) var(--ease);
}
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
:root[data-theme="dark"] .switch[aria-checked="true"]::after { background: var(--on-primary); }

.stars { display: inline-flex; gap: 2px; }
.star { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--line-strong); transition: color var(--t-fast), transform .1s; }
.star.on { color: var(--accent); }
.star:hover { transform: scale(1.06); }
.stars.readonly .star { width: auto; height: auto; }
.stars.readonly .star:hover { transform: none; }

/* ================= Forms ================= */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend, .label { font-size: 13px; font-weight: 700; color: var(--text); padding: 0; }
.label .opt, .field > label .opt { color: var(--text-3); font-weight: 550; }
.req { color: var(--danger); }
.input, .textarea {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-size: 15px; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (max-width: 767px) { .input, .textarea { font-size: 16px; } }
.err { display: none; font-size: 12.5px; font-weight: 600; color: var(--danger); }
.field.invalid .input, .field.invalid .textarea, .field.invalid .dd-trigger, .field.invalid .dt-trigger { border-color: var(--danger); }
.field.invalid .err { display: block; }
.help { font-size: 12.5px; color: var(--text-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .grid-2.stack-sm { grid-template-columns: minmax(0, 1fr); } }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button {
  height: 34px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2);
  font-size: 13px; font-weight: 650; color: var(--text-2); transition: all var(--t-fast);
}
.quick button:hover, .quick button[aria-pressed="true"] { color: var(--primary-ink); border-color: var(--primary); background: var(--primary-soft); }
.suffix-wrap { position: relative; }
.suffix-wrap .input { padding-right: 48px; }
.suffix-wrap > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: 13.5px; pointer-events: none; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box > svg { position: absolute; left: 14px; color: var(--text-3); pointer-events: none; }
.search-box .input { padding-left: 42px; border-radius: var(--r-pill); }

/* Choice tiles (type picker, stage/status lists) */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choices.single { grid-template-columns: minmax(0, 1fr); }
.choice {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 14px; text-align: left;
  border: 1px solid var(--line); background: var(--surface); font-weight: 650; font-size: 14px; transition: all var(--t-fast);
}
.choice:hover { border-color: var(--line-strong); background: var(--surface-2); }
.choice[aria-pressed="true"], .choice.is-current { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary-ink); }
.choice .choice-desc { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.choice .cur { margin-left: auto; font-size: 12px; font-weight: 750; color: var(--primary-ink); }

/* ================= Overlays: sheets (forms, dialogs) and the proposal panel ================= */
.overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t);
}
.overlay.open { opacity: 1; visibility: visible; }
.sheet {
  width: 100%; max-height: calc(100dvh - 20px - var(--safe-t)); display: flex; flex-direction: column;
  background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--sh-3); padding-bottom: var(--safe-b);
  transform: translateY(28px); transition: transform var(--t-slow) var(--ease);
}
.overlay.open .sheet { transform: none; }
.sheet form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sheet-grip { width: 40px; height: 5px; border-radius: var(--r-pill); background: var(--line-strong); margin: 8px auto 0; flex-shrink: 0; }
@media (min-width: 768px) {
  .overlay { align-items: center; padding: 24px; }
  .sheet { width: min(560px, 100%); max-height: min(88dvh, 900px); border-radius: 24px; padding-bottom: 0; transform: translateY(12px) scale(.985); }
  .sheet.narrow { width: min(440px, 100%); }
  .sheet.wide { width: min(820px, 100%); }
  .sheet-grip { display: none; }
}
.sheet.full { max-height: none; height: calc(100dvh - var(--safe-t)); border-radius: 0; }
@media (min-width: 768px) { .sheet.full { height: auto; max-height: min(92dvh, 960px); border-radius: 24px; } }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px 8px; flex-shrink: 0; }
.sheet-head .grow { flex: 1; min-width: 0; }
.sheet-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.sheet-sub { margin-top: 3px; color: var(--text-2); font-size: 14px; }
.sheet-head .icon-btn { margin: -4px -8px 0 0; }
.sheet-body { padding: 8px 20px 20px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; }
.sheet-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line);
  background: var(--surface); flex-shrink: 0; border-radius: 0 0 24px 24px;
}
.sheet-foot .btn { flex: 0 0 auto; }
@media (max-width: 767px) { .sheet-foot .btn-primary { flex: 1; } }

.overlay.panel-overlay { align-items: stretch; justify-content: flex-end; padding: 0; }
.panel {
  width: 100%; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); overflow: hidden;
  transform: translateX(32px); transition: transform var(--t-slow) var(--ease);
}
.overlay.open .panel { transform: none; }
@media (min-width: 768px) { .panel { width: min(720px, 100%); box-shadow: var(--sh-3); border-left: 1px solid var(--line); } }
.panel-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* ================= Toasts ================= */
.toasts {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 86px); z-index: 120;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
@media (min-width: 1024px) { .toasts { left: auto; right: 24px; bottom: 24px; align-items: flex-end; } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(460px, 100%); min-height: 48px;
  padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--text); color: var(--bg); box-shadow: var(--sh-3);
  font-size: 14px; font-weight: 650; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity var(--t), transform var(--t) var(--ease);
}
.toast.show { opacity: 1; transform: none; }
.toast-msg { flex: 1; min-width: 0; padding: 4px 0; }
.toast-action { flex-shrink: 0; height: 34px; padding: 0 12px; border-radius: 9px; font-weight: 800; color: var(--accent); }
.toast-action:hover { background: rgba(127, 127, 127, .18); }
.toast.error { background: var(--danger); color: #fff; }
.toast.error .toast-action { color: #fff; }

/* ================= Empty states, skeletons, banners ================= */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--text-2); }
.empty-icon { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 6px; background: var(--primary-soft); color: var(--primary-ink); }
.empty h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--text); }
.empty p { max-width: 42ch; }
.empty .btn { margin-top: 10px; }

.skeleton { border-radius: 10px; background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.banner.warn { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.banner.info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.banner .grow { flex: 1; min-width: 0; }

/* Facts list (profile) */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 14px 18px; }
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact dt { font-size: 12.5px; font-weight: 650; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.fact dd { font-size: 15px; font-weight: 650; color: var(--text); word-break: break-word; }

/* Progress across the five phases */
.journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.journey span { height: 6px; border-radius: 3px; background: var(--surface-3); }
.journey span.on { background: var(--c, var(--primary)); }
.journey.ended span.on { background: var(--text-3); }
/* Shell details that need more than the shared components */
.kbd-on-primary { margin-left: auto; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: inherit; }
:root[data-theme="dark"] .kbd-on-primary { background: rgba(0, 0, 0, .12); border-color: rgba(0, 0, 0, .2); }
.sidebar .btn-primary { justify-content: flex-start; padding: 0 14px; }

.sync-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.sync-note svg { color: var(--success); margin-top: 1px; }
.sync-note[data-sync="offline"], .sync-note[data-sync="error"] { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.sync-note[data-sync="offline"] svg, .sync-note[data-sync="error"] svg { color: var(--warning); }
.sync-note[data-sync="signedout"] svg { color: var(--text-3); }
.sync-note[data-sync="syncing"] svg { color: var(--info); animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Custom select / combo lists (same markup as before, new tokens) */
/* ============ Dropdowns ============ */
.dd-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;clip:rect(0 0 0 0);overflow:hidden}
.dd-trigger{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 12px 0 10px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);text-align:left;font-size:14px;font-weight:560;transition:border-color .15s,box-shadow .15s}
.dd-trigger:hover{border-color:var(--text-3)}
.dd-trigger:focus-visible,.dd-trigger.is-open{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.dd-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-chev{color:var(--text-3);transition:transform .18s var(--ease),color .15s}
.dd-trigger.is-open .dd-chev{transform:rotate(180deg);color:var(--primary)}
.dd-visual{display:grid;place-items:center;flex-shrink:0;width:24px}
.dd-ico{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface))}
.dd-num{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface));font-variant-numeric:tabular-nums}
.dd-dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,var(--surface))}
.dd-act{color:var(--text-2)}
.dd-pop{position:fixed;z-index:120;left:0;top:0;min-width:200px;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:5px;opacity:0;visibility:hidden;transform:translateY(-4px) scale(.985);transform-origin:top center;transition:opacity .14s,transform .16s var(--ease),visibility .14s}
.dd-pop.up{transform-origin:bottom center;transform:translateY(4px) scale(.985)}
.dd-pop.open{opacity:1;visibility:visible;transform:none}
.dd-opt{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 9px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:540;user-select:none;-webkit-user-select:none}
.dd-opt.is-active{background:var(--surface-3)}
.dd-opt[aria-selected="true"]{background:var(--primary-soft)}
.dd-opt[aria-selected="true"].is-active{background:color-mix(in srgb,var(--primary) 15%,var(--surface))}
.dd-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-desc{font-size:12px;color:var(--text-2);font-weight:450;margin-top:1px}
.dd-check{color:var(--primary);visibility:hidden}
.dd-opt[aria-selected="true"] .dd-check{visibility:visible}
.dd-opt b{font-weight:700;color:var(--primary)}
.dd-sep{height:1px;background:var(--line);margin:5px 7px}
.input.dd-combo{padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c98a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
@media (max-width:720px){.dd-trigger{height:auto;min-height:44px;font-size:16px}.dd-opt{min-height:46px;font-size:15px}.dd-desc{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.dd-pop,.dd-chev{transition:none}}
/* Date and time pickers (same markup as before, new tokens) */
/* ============ Date & time pickers ============ */
.dt-wrap{position:relative}
.dt-trigger{display:flex;align-items:center;gap:9px;text-align:left;font-weight:540;cursor:pointer}
.dt-trigger.is-open{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.dt-ico{color:var(--text-2)}
.dt-trigger.is-open .dt-ico{color:var(--primary)}
.dt-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-ph{color:var(--text-3);font-weight:450}
.dt-rel{flex-shrink:0;font-size:11.5px;font-weight:650;color:var(--primary);background:var(--primary-soft);padding:2px 8px;border-radius:999px}
.dt-wrap.has-clear .dt-trigger{padding-right:40px}
.dt-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--text-3);display:grid;place-items:center;padding:0}
.dt-clear:hover{background:var(--surface-3);color:var(--text)}
.dt-pop{padding:12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.cal-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em}
.cal-nav{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:9px;background:none;color:var(--text-2);padding:0}
.cal-nav:hover{background:var(--surface-3);color:var(--text)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-wd{text-align:center;font-size:11.5px;font-weight:600;color:var(--text-3);padding:2px 0 6px}
.cal-day{height:36px;border:0;border-radius:10px;background:none;font-size:13.5px;font-weight:540;font-variant-numeric:tabular-nums;padding:0;transition:background .1s}
.cal-day:hover{background:var(--surface-3)}
.cal-day.out{color:var(--text-3)}
.cal-day.today{color:var(--primary);font-weight:700;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--primary) 55%,var(--surface))}
.cal-day.sel,.cal-day.sel:hover{background:var(--primary);color:var(--on-primary);font-weight:700;box-shadow:none}
.cal-day:focus-visible,.tp-list button:focus-visible,.cal-chip:focus-visible,.cal-nav:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.cal-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.cal-chip{height:29px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:12.5px;font-weight:540;color:var(--text-2);transition:all .12s}
.cal-chip:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}
.cal-chip.clear{margin-left:auto;color:var(--danger)}
.cal-chip.clear:hover{border-color:#f0c8c2;background:var(--danger-soft);color:var(--danger)}
.cal-chip.done{margin-left:auto;background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.cal-chip.clear + .cal-chip.done{margin-left:0}
.cal-chip.done:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)}
.tp-cols{display:grid;grid-template-columns:1fr 1fr 70px;gap:8px}
.tp-h{font-size:11.5px;font-weight:600;color:var(--text-3);text-align:center;padding:0 0 6px}
.tp-list{height:216px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.tp-list button{flex-shrink:0;height:36px;border:0;border-radius:9px;background:none;font-size:14px;font-weight:540;font-variant-numeric:tabular-nums;padding:0}
.tp-list button:hover{background:var(--surface-3)}
.tp-list button.sel{background:var(--primary);color:var(--on-primary);font-weight:700}
.tp-list.short{height:auto}
@media (max-width:720px){.cal-day{height:40px;font-size:15px}.dt-wd{display:none}.dt-yr{display:none}.tp-list button{height:40px;font-size:15px}}
/* ================= Today ================= */
.page-head.td-head { margin-bottom: 24px; }
.page-head.td-head .page-sub { font-size: 15.5px; }

/* Phone: one column in priority order (the two wrappers dissolve).
   Desktop: main column + a narrower side column. */
.td-layout { display: flex; flex-direction: column; gap: 28px; }
.td-main, .td-side { display: contents; }
.td-layout .section { margin-top: 0; min-width: 0; }
.td-weeksec { order: 1; }
.td-needs { order: 2; }
.td-coming { order: 3; }
.td-quiet { order: 4; }
.td-nodate { order: 5; }
.td-glance { order: 6; }
@media (min-width: 1024px) {
  .td-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .td-main, .td-side { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
  .td-layout .section { order: 0; }
}
@media (min-width: 1280px) { .td-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }

.btn.td-cal-link { margin-right: -8px; color: var(--primary-ink); }

/* ---------- Needs you ---------- */
.td-due-list { display: flex; flex-direction: column; gap: 12px; }
.td-due { padding: 6px 6px 12px; }
.td-due-main {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 12px 10px 14px; border-radius: 14px;
  text-align: left; transition: background var(--t-fast);
}
.td-due-main:hover { background: var(--surface-2); }
.td-due-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.td-due-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.td-due-name {
  font-family: var(--font-display); font-size: 25px; line-height: 1.1; letter-spacing: -.01em; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-due-top .due { flex-shrink: 0; }
.td-due-next { margin-top: 6px; font-weight: 750; font-size: 15.5px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.td-due-last { font-size: 13px; color: var(--text-2); }
.quick-actions.td-qa { gap: 4px; padding: 0 2px; }
.td-qa .qa { min-height: 56px; padding: 6px 0; font-size: 11.5px; letter-spacing: -.01em; min-width: 0; }
.td-qa .qa span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 374px) { .td-qa .qa { font-size: 10.5px; } }
@media (min-width: 768px) {
  .td-due { padding: 8px 8px 14px; }
  .td-due-main { padding: 14px 14px 16px; gap: 16px; }
  .quick-actions.td-qa { padding: 0 14px; gap: 8px; }
  .td-qa .qa { flex-direction: row; gap: 8px; min-height: 44px; font-size: 13.5px; }
}

/* All caught up */
.td-clear { display: flex; align-items: flex-start; gap: 14px; padding: 18px; }
.td-clear-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--success-soft); color: var(--success);
}
.td-clear-title { font-family: var(--font-display); font-size: 24px; line-height: 1.15; color: var(--text); }
.td-clear-text { margin-top: 4px; color: var(--text-2); font-size: 14.5px; }
@media (min-width: 768px) { .td-clear { padding: 22px 24px; } }

/* ---------- Lists ---------- */
.td-li + .td-li .row { border-top: 1px solid var(--line); }
.td-li:first-child .row { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.td-li:last-child .row { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.td-li:only-child .row { border-radius: var(--r-lg); }
.row-trail.td-when { font-size: 13px; font-weight: 700; color: var(--text-2); }
.badge.td-badge { height: 24px; padding: 0 9px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }

.row.td-split { padding: 0 6px 0 0; min-height: 0; gap: 4px; }
.td-split-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; align-self: stretch;
  min-height: 60px; padding: 10px 6px 10px 16px; text-align: left; border-radius: var(--r-lg) 0 0 var(--r-lg); transition: background var(--t-fast);
}
.td-split-main:hover { background: var(--surface-2); }
.td-split-main:only-child { border-radius: var(--r-lg); }   /* no date button (family members who can only comment) */
.row-title.td-small-title { font-size: 14px; }
.td-split .icon-btn { color: var(--primary-ink); }

/* ---------- Week strip ---------- */
.td-week {
  display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 2px; padding: 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.td-week::-webkit-scrollbar { display: none; }
.td-week-cell { display: flex; min-width: 0; }
.td-day {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; border-radius: 13px;
  color: var(--text); transition: background var(--t-fast), color var(--t-fast);
}
.td-day:hover { background: var(--surface-3); }
.td-day-dow { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.td-day-num { font-size: 18px; font-weight: 750; line-height: 1.25; font-variant-numeric: tabular-nums; }
.td-day-dots { display: flex; gap: 3px; height: 6px; }
.td-day-dots i { width: 6px; height: 6px; border-radius: 50%; }
.td-day-dots .dot-f { background: var(--primary); }
.td-day-dots .dot-m { background: var(--ph-meeting); }
.td-day.is-today { background: var(--primary); color: var(--on-primary); }
.td-day.is-today .td-day-dow { color: var(--on-primary); opacity: .8; }
.td-day.is-today .dot-f { background: var(--on-primary); }
.td-day.is-today .dot-m { background: var(--on-primary); opacity: .65; }
.td-day.is-today:hover { background: var(--primary-hover); }

/* ---------- Stats ---------- */
.td-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px; }
.td-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 64px;
  padding: 10px 2px; border-radius: 12px; text-align: center; transition: background var(--t-fast);
}
.td-stat:hover { background: var(--surface-3); }
.td-stat-n { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--text); }
.td-stat-label { font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--text-2); }

/* Side column: stats as a compact list reads better at 340px */
@media (min-width: 1024px) {
  .td-stats { grid-template-columns: minmax(0, 1fr); padding: 6px; }
  .td-stat { flex-direction: row-reverse; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 12px; text-align: left; }
  .td-stat + .td-stat { box-shadow: 0 -1px 0 var(--line); border-radius: 0; }
  .td-stat:hover { border-radius: 12px; box-shadow: none; }
  .td-stat:hover + .td-stat { box-shadow: none; }
  .td-stat-n { font-family: var(--font-ui); font-size: 16px; font-weight: 750; }
  .td-stat-label { font-size: 14px; font-weight: 650; color: var(--text); }
}

/* ---------- First run ---------- */
.td-welcome { padding: 12px 8px 20px; }
.td-welcome .empty { padding: 32px 16px 12px; }
.td-welcome .empty p { max-width: 46ch; }
/* ================= Pipeline ================= */

/* ---------- Header ---------- */
.pl-head { align-items: flex-start; row-gap: 14px; }
.pl-head-text { flex: 1; min-width: 0; }
.pl-insights { flex-shrink: 0; margin-top: 4px; }
.pl-tools { width: 100%; flex-wrap: nowrap; align-items: center; gap: 10px; }
.pl-search { flex: 1; min-width: 0; }
.pl-search .input { min-height: 44px; padding-right: 44px; }
.pl-search-clear { position: absolute; right: 4px; }
.pl-toggle {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 7px 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  font-size: 13.5px; font-weight: 700; color: var(--text-2); white-space: nowrap;
}
.pl-toggle .switch { width: 40px; height: 24px; }
.pl-toggle .switch::after { width: 18px; height: 18px; }
.pl-toggle .switch[aria-checked="true"]::after { transform: translateX(16px); }
.pl-toggle-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .pl-head { align-items: flex-end; }
  .pl-tools { width: auto; }
  .pl-search { flex: 0 0 260px; }
  .pl-search .input, .pl-toggle { min-height: 40px; }
}
.pl-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.pl-empty-actions .btn { margin-top: 0; }

/* ---------- Card ---------- */
.pc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px 14px; cursor: default; }
.pc:focus-within { border-color: var(--line-strong); }
.pc-top { display: flex; align-items: flex-start; gap: 4px; }
.pc-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: inherit;
  border-radius: 10px; min-height: 40px;
}
/* The whole card opens the proposal; the Move button sits above this layer. */
.pc-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pc { border-radius: var(--r-lg); }
.pc-main:focus-visible { outline: none; }
.pc-main:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-lg); }
.pc-id { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pc-name { font-weight: 750; font-size: 15px; line-height: 1.3; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-line { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-move { position: relative; z-index: 1; margin: -2px -4px 0 0; color: var(--text-3); width: 40px; height: 40px; }
.pc-move:hover { color: var(--text); }
@media (pointer: coarse) { .pc-move { width: 44px; height: 44px; margin: -4px -6px -4px 0; } }

.pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pc-step {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 24px; padding: 0 3px 0 9px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 650; color: var(--text);
}
.pc-step > svg { color: var(--text-3); }
.pc-step-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-step .due { height: 18px; padding: 0 7px; font-size: 11.5px; }
.pc-step:not(:has(.due)) { padding-right: 10px; }

.pc-hint { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.pc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.pc-hint.is-ok .pc-dot { background: var(--success); }
.pc-hint.is-warn .pc-dot { background: var(--warning); }
.pc-hint.is-quiet .pc-dot { background: var(--warning); }
.pc-hint.is-quiet { color: var(--warning); }
.pc-hint.is-overdue .pc-dot { background: var(--danger); }
.pc-hint.is-overdue { color: var(--danger); }

/* Ended proposals stay visible but step back. */
.pc.is-ended { background: var(--surface-2); box-shadow: none; }
.pc.is-ended .pc-name { color: var(--text-2); font-weight: 700; }
.pc.is-ended .avatar { opacity: .7; filter: saturate(.4); }

/* ---------- Stage groups ---------- */
.pl-stage { display: flex; flex-direction: column; gap: 8px; border-radius: 14px; transition: background var(--t-fast), box-shadow var(--t-fast); }
.pl-stage-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.pl-stage-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-stage-n { font-weight: 650; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pl-cards { display: flex; flex-direction: column; gap: 8px; }
.pl-empty-stage {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
  border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--text-3); font-size: 12.5px; font-weight: 650;
}

/* ---------- Phone / tablet: phase tabs + list ---------- */
.pl-tabs { margin: 0 -16px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
.pl-tabs .chip { height: 40px; }
.pl-tabs .chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--bg); }
.pl-phase { margin-top: 18px; display: flex; flex-direction: column; gap: 22px; touch-action: pan-y; min-height: 40vh; }
.pl-phase .pl-stage-head { font-size: 12px; }
.pl-phase .pl-stage-head::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.pl-phase .pc { padding: 14px 12px 14px 16px; }
.pl-phase .pl-empty-stage { justify-content: flex-start; border-style: dashed; min-height: 44px; }
.pl-phase-empty { padding: 32px 16px; text-align: center; color: var(--text-2); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
@media (min-width: 768px) {
  .pl-tabs { margin: 0; padding: 2px 0 4px; }
  /* Tablet: stages side by side; a one-stage phase spreads its cards instead. */
  .pl-phase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px 16px; }
  .pl-phase.is-single, .pl-phase:has(.pl-phase-empty) { grid-template-columns: minmax(0, 1fr); }
  .pl-phase.is-single .pl-cards.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- Desktop board ---------- */
/* The page fills the viewport; the board scrolls sideways, each column scrolls down.
   48px matches the bottom padding the shell gives .main on desktop. */
.pl-page.is-board { display: flex; flex-direction: column; height: calc(100dvh - 48px); min-height: 560px; padding-right: 0; }
.pl-page.is-board .pl-head { padding-right: 40px; margin-bottom: 18px; }
.pl-board {
  flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 14px;
  overflow-x: auto; overflow-y: hidden; padding: 2px 40px 4px 2px; margin-left: -2px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior-x: contain;
}
.pl-board:focus-visible { outline-offset: -2px; border-radius: var(--r-lg); }
.pl-col {
  flex: 1 0 276px; min-width: 0; max-width: 340px; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.pl-col-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; flex-shrink: 0; }
.pl-col-dot { width: 10px; height: 10px; border-radius: 4px; background: var(--c); flex-shrink: 0; }
.pl-col-title { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.pl-col-n {
  margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center;
  border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.pl-col-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px;
  padding: 2px 10px 14px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.pl-col .pl-stage { padding: 4px; margin: -4px; }
.pl-col .pl-stage-head { padding: 0 6px; }

/* Move button: quiet on the board until the card is hovered or focused. */
@media (pointer: fine) {
  .pl-col .pc-move { opacity: 0; transition: opacity var(--t-fast); }
  .pl-col .pc:hover .pc-move, .pl-col .pc:focus-within .pc-move { opacity: 1; }
}

/* Drag and drop */
.pl-col .pc[draggable="true"] { cursor: grab; }
.pl-col .pc[draggable="true"] .pc-main { cursor: grab; }
.pc.is-dragging { opacity: .45; box-shadow: none; }
.pl-board.is-dragging .pl-stage { box-shadow: inset 0 0 0 1px transparent; }
.pl-board.is-dragging .pl-empty-stage.is-target { border-color: var(--text-3); color: var(--text-2); }
.pl-stage.is-over { background: var(--primary-soft); box-shadow: inset 0 0 0 1.5px var(--primary); }
.pl-stage.is-over .pl-stage-head { color: var(--primary-ink); }
.pl-stage.is-over .pl-empty-stage { border-color: var(--primary); color: var(--primary-ink); background: transparent; }
/* ================= People =================
   Phone: one card holding rows. 768px and up: a grid of cards. One markup for both:
   the card footer (next step, last contact) only shows on the grid, the short due
   badge beside the name only on phones. */

.pp-headbar { margin-bottom: 16px; }
.pp-actions { align-items: center; }
.pp-sort { width: 200px; }
.pp-sort .dd-trigger { height: 44px; min-height: 44px; font-weight: 650; font-size: 14px; }
.pp-sort-ico { color: var(--text-2); }
@media (max-width: 599px) {
  .pp-actions { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .pp-sort { width: auto; }
}
@media (pointer: fine) { .pp-sort .dd-trigger { height: 40px; min-height: 40px; } }

/* Search + view chips */
.pp-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.pp-search .input { height: 48px; padding-right: 48px; background: var(--surface); box-shadow: var(--sh-1); }
.pp-search-clear { position: absolute; right: 6px; }
.pp-chips { margin: 0 -16px; padding: 2px 16px; scroll-padding: 0 16px; }
.pp-chip-clear { color: var(--primary-ink); border-color: transparent; background: var(--primary-soft); gap: 5px; }
.pp-chip-clear:hover { color: var(--primary-ink); border-color: transparent; filter: brightness(.97); }
@media (min-width: 768px) {
  .pp-tools { gap: 14px; }
  .pp-search { max-width: 560px; }
  .pp-chips { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
}

.pp-select-hint {
  display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: 13.5px; font-weight: 650; color: var(--primary-ink);
}

/* ---------- Results: rows on phones ---------- */
.pp-results {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden;
}
.pp-cell + .pp-cell { border-top: 1px solid var(--line); }
.pp-item {
  display: flex; flex-direction: column; width: 100%; padding: 14px 16px; text-align: left; color: inherit;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t), transform .1s;
}
.pp-item:hover { background: var(--surface-2); }
.pp-item:active { background: var(--surface-3); }
.pp-item:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
.pp-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; }
.pp-item .avatar.lg { width: 48px; height: 48px; border-radius: 15px; font-size: 23px; }
.pp-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.pp-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-name {
  flex: 1; min-width: 0; font-weight: 750; font-size: 15.5px; line-height: 1.3; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-due { flex-shrink: 0; display: flex; }
.pp-due .due { height: 22px; padding: 0 8px; font-size: 12px; }
.pp-line { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-match {
  font-size: 12.5px; color: var(--text-2); line-height: 1.4; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pp-match-label { font-weight: 700; color: var(--primary-ink); }
.pp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.pp-foot { display: none; }

/* Select mode */
.pp-check {
  flex-shrink: 0; align-self: center; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--on-primary);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pp-item.is-picked { background: var(--primary-soft); }
.pp-item.is-picked .pp-check { background: var(--primary); border-color: var(--primary); }
.pp-item.is-picked .pp-line, .pp-item.is-picked .pp-match { color: var(--text); }
.pp.is-selecting { padding-bottom: 96px; }

/* ---------- Results: cards from 768px ---------- */
@media (min-width: 768px) {
  .pp-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
    background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  }
  .pp-cell + .pp-cell { border-top: 0; }
  .pp-cell { display: flex; min-width: 0; }
  .pp-item {
    position: relative; height: 100%; padding: 20px; gap: 16px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
  }
  .pp-item:hover { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--sh-2); }
  .pp-item:active { transform: translateY(1px); background: var(--surface); }
  .pp-item:focus-visible { outline-offset: 2px; border-radius: var(--r-lg); }
  .pp-item .avatar.lg { width: 56px; height: 56px; border-radius: 17px; font-size: 26px; }
  .pp-head { gap: 14px; }
  .pp-name { font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.1; letter-spacing: -.01em; }
  .pp-line { font-size: 13.5px; margin-top: 1px; }
  .pp-meta { margin-top: 8px; }
  .pp-due { display: none; }

  .pp-foot {
    display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  }
  .pp-next { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .pp-foot-label { font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
  .pp-next-row { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; font-size: 14px; font-weight: 650; }
  .pp-next-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-none { color: var(--text-3); font-weight: 600; }
  .pp-last { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
  .pp-last svg { color: var(--text-3); }

  .pp-check { position: absolute; top: 14px; right: 14px; }
  .pp-item.is-picked { background: var(--surface); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), var(--sh-2); }
  .pp-item.is-picked .pp-line, .pp-item.is-picked .pp-match { color: var(--text-2); }
  .is-selecting .pp-title { padding-right: 30px; }
}

/* ---------- Floating compare bar (above the phone tab bar) ---------- */
.pp-selectbar {
  position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px);
  display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 10px 10px 10px 14px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  animation: pp-rise var(--t-slow) var(--ease);
}
.pp-selectbar-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.pp-selectbar .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); }
.pp-selectbar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pp-selectbar-text strong { font-size: 14.5px; font-weight: 750; white-space: nowrap; }
.pp-selectbar-hint { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-selectbar .btn { min-height: 44px; }
@media (max-width: 389px) { .pp-selectbar .avatar-stack { display: none; } }
@media (min-width: 768px) {
  .pp-selectbar { left: 50%; right: auto; width: min(560px, calc(100% - 48px)); transform: translateX(-50%); padding: 10px 10px 10px 18px; }
}
@media (min-width: 1024px) {
  .pp-selectbar { bottom: 24px; left: calc(50% + var(--sidebar-w) / 2); }
  .pp-selectbar .btn { min-height: 40px; }
  .pp.is-selecting { padding-bottom: 104px; }
}
@keyframes pp-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
/* ================= Calendar ================= */
.page-head.cv-head { align-items: flex-end; }
.cv-head-text { min-width: 0; }
.cv-head .page-title { font-size: clamp(26px, 7.4vw, 46px); white-space: nowrap; }
.cv-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.btn.cv-today { padding: 0 14px; }
.btn.cv-today:disabled { opacity: .5; cursor: default; }

/* Kind colours, shared by dots, labels and the legend */
.cv .k-followup { --k: var(--primary); }
.cv .k-meeting { --k: var(--ph-meeting); }
.cv .k-interaction { --k: var(--text-3); }

.cv-layout { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) {
  .cv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
  .cv-agenda { position: sticky; top: 24px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 2px; margin: -2px; }
}
@media (min-width: 1280px) { .cv-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; } }

/* ---------- Month grid ---------- */
.cv-grid-card { padding: 8px 6px 6px; }
.cv-dow, .cv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cv-dow span {
  text-align: center; padding: 4px 0 8px; font-size: 11.5px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
}
.cv-grid { gap: 2px; }
.cv-day {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
  height: 52px; padding: 7px 2px 0; border-radius: 12px; color: var(--text);
  transition: background var(--t-fast), color var(--t-fast);
}
.cv-day:hover { background: var(--surface-3); }
.cv-num {
  display: grid; place-items: center; min-width: 28px; height: 26px; padding: 0 2px; border-radius: 9px;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.cv-day.is-out { color: var(--text-3); }
.cv-day.is-out .cv-num { font-weight: 550; }
.cv-day.is-today .cv-num { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary-ink); font-weight: 800; }
.cv-day.is-sel { background: var(--primary); color: var(--on-primary); }
.cv-day.is-sel:hover { background: var(--primary-hover); }
.cv-day.is-sel .cv-num { color: var(--on-primary); box-shadow: none; }
.cv-day.is-sel.is-today .cv-num { box-shadow: inset 0 0 0 1.5px var(--on-primary); }

.cv-dots { display: flex; gap: 3px; height: 6px; }
.cv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); }
.cv-day.is-out .cv-dots i { opacity: .55; }
.cv-day.is-sel .cv-dots i { background: var(--on-primary); }
.cv-day.is-sel .cv-dots i.k-interaction { opacity: .6; }
.cv-labels { display: none; }

@media (min-width: 768px) {
  .cv-grid-card { padding: 10px; }
  .cv-day { height: 64px; }
  .cv-num { font-size: 15.5px; }
}
/* Desktop: taller cells with the first names instead of dots */
@media (min-width: 1024px) {
  .cv-grid-card { padding: 12px; }
  .cv-grid { gap: 4px; }
  .cv-day { height: 96px; align-items: stretch; padding: 6px 6px 6px; gap: 4px; border: 1px solid transparent; }
  .cv-day.has-items:not(.is-sel) { background: var(--surface-2); border-color: var(--line); }
  .cv-day.has-items:not(.is-sel):hover { background: var(--surface-3); }
  .cv-num { align-self: flex-start; }
  .cv-dots { display: none; }
  .cv-labels { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cv-label {
    display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; font-weight: 650; line-height: 1.35;
    color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  }
  .cv-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--k); flex-shrink: 0; }
  .cv-more { font-size: 11px; font-weight: 700; color: var(--text-3); text-align: left; padding-left: 11px; }
  .cv-day.is-out .cv-label { opacity: .6; }
  .cv-day.is-sel .cv-label, .cv-day.is-sel .cv-more { color: var(--on-primary); }
  .cv-day.is-sel .cv-label::before { background: var(--on-primary); }
}

.cv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding: 0 4px; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.cv-legend li { display: inline-flex; align-items: center; gap: 7px; }
.cv-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }

/* ---------- Agenda ---------- */
.cv-agenda .section:first-child { margin-top: 0; }
.section-head.cv-day-head { align-items: flex-end; margin-bottom: 12px; }
.cv-day-kicker { font-size: 12.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.cv-day-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.12; letter-spacing: -.01em; margin-top: 2px; }
.cv-none { padding: 4px 2px; color: var(--text-2); font-size: 14.5px; }

.cv-list { display: flex; flex-direction: column; overflow: hidden; }
.cv-item { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.cv-item + .cv-item { border-top: 1px solid var(--line); }
.cv-item-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 8px 10px 14px;
  text-align: left; transition: background var(--t-fast);
}
.cv-item:not(:has(.cv-ics)) { padding-right: 0; }
.cv-item-main:hover { background: var(--surface-2); }
.cv-when { width: 66px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-time { font-size: 13px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.cv-kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); flex-shrink: 0; }
.cv-ics { color: var(--primary-ink); flex-shrink: 0; }

.cv-later { display: flex; flex-direction: column; gap: 16px; }
.cv-group { display: flex; flex-direction: column; gap: 8px; }
.cv-group-head {
  align-self: flex-start; min-height: 32px; padding: 0 4px; border-radius: 8px; font-size: 14px; font-weight: 750; color: var(--text);
}
.cv-group-head:hover { color: var(--primary-ink); }
@media (pointer: coarse) { .cv-group-head { min-height: 44px; } }
/* ================= Insights ================= */

/* ---------- Stat tiles ---------- */
.in-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .in-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.in-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; min-width: 0; }
@media (min-width: 768px) { .in-tile { padding: 18px 20px 20px; } }
.in-tile-icon {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 10px;
  background: var(--primary-soft); color: var(--primary-ink);
}
.in-tile-value { font-size: 28px; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .in-tile-value { font-size: 32px; } }
.in-tile-label { font-size: 13px; font-weight: 650; color: var(--text-2); line-height: 1.3; }

/* ---------- Cards ---------- */
.in-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
@media (min-width: 1024px) {
  .in-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .in-span { grid-column: 1 / -1; }
}
.in-card { padding: 18px 16px; min-width: 0; }
@media (min-width: 768px) { .in-card { padding: 22px 24px 24px; } }
.in-card-head { margin-bottom: 18px; }
.in-card-title { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.in-card-sub { margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
.in-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 12.5px; color: var(--text-2); }
.in-note svg { color: var(--text-3); }

/* ---------- Horizontal bars (funnel, time in phase) ---------- */
.in-bars { display: flex; flex-direction: column; gap: 12px; }
.in-bar-row { display: grid; grid-template-columns: 94px minmax(0, 1fr) 5.6em; align-items: center; gap: 10px; min-height: 24px; }
@media (min-width: 768px) { .in-bar-row { grid-template-columns: 96px minmax(0, 1fr) 5.6em; } }
.in-bar-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-bar-label::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.in-track { position: relative; display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--surface-3); overflow: hidden; }
.in-track.slim { height: 6px; border-radius: 0 3px 3px 0; }
.in-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--c, var(--primary)); transition: width var(--t-slow) var(--ease); }
.in-track.slim .in-fill { border-radius: 0 3px 3px 0; }
.in-bar-value { min-width: 0; text-align: right; font-size: 13.5px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.in-bar-share { font-weight: 600; color: var(--text-2); }
.in-bar-row.is-none .in-bar-label { color: var(--text-2); }
.in-none { grid-column: 2 / -1; font-size: 13px; color: var(--text-3); font-style: italic; }

/* ---------- Outcomes: one stacked bar + legend ---------- */
.in-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.in-stack span { flex-basis: 0; min-width: 4px; background: var(--c); }
.in-legend { display: flex; flex-direction: column; margin-top: 14px; }
.in-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 40px; align-items: center; column-gap: 10px; min-height: 44px; border-top: 1px solid var(--line); }
.in-legend li:first-child { border-top: 0; }
.in-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.in-legend-label { font-size: 14px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-legend-n { font-size: 17px; font-weight: 750; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.in-legend-pct { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- Sources table ---------- */
.in-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.in-table th, .in-table td { padding: 12px 8px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; }
.in-table thead th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.in-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.in-table th:first-child, .in-table td:first-child { padding-left: 0; }
.in-table th:last-child, .in-table td:last-child { padding-right: 0; }
.in-src { font-weight: 700; color: var(--text); }
.in-total, .in-fin { font-weight: 700; }
.in-meet { width: 42%; }
.in-meet-text { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.in-meet .in-track { --c: var(--ph-meeting); max-width: 280px; }
.in-unit { display: none; }

/* Phones: each source becomes a small block: name + total, then meeting text + finalized, then the bar. */
@media (max-width: 599px) {
  .in-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .in-table, .in-table tbody { display: block; }
  .in-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
  .in-table tbody tr:first-child { border-top: 0; padding-top: 0; }
  .in-table th, .in-table td { display: block; padding: 0; border: 0; }
  .in-unit { display: inline; font-weight: 600; color: var(--text-2); }
  .in-src { font-size: 14.5px; }
  .in-total { text-align: right; font-size: 13.5px; }
  .in-meet { grid-column: 1; grid-row: 2; width: auto; }
  .in-meet-text { margin-bottom: 6px; }
  .in-meet .in-track { max-width: none; }
  .in-fin { grid-column: 2; grid-row: 2; font-size: 13px; font-weight: 700; }
}

/* ---------- Weekly activity ---------- */
.in-weeks { margin: 0; }
.in-weeks-plot { position: relative; height: 150px; padding-top: 8px; border-bottom: 1px solid var(--line-strong); }
.in-weeks-plot::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 1px solid var(--line); }
.in-weeks-max { position: absolute; top: -2px; right: 0; transform: translateY(-50%); padding-left: 6px; background: var(--surface); font-size: 11.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.in-weeks-cols { position: relative; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; align-items: end; padding-right: 22px; }
.in-week { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.in-week-bar { width: min(100%, 24px); min-height: 3px; border-radius: 4px 4px 0 0; background: var(--primary); opacity: .55; transition: opacity var(--t-fast); }
.in-week.is-now .in-week-bar { opacity: 1; }
.in-week:hover .in-week-bar { opacity: 1; }
.in-week-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); z-index: 2; opacity: 0; pointer-events: none;
  padding: 6px 9px; border-radius: 9px; background: var(--text); color: var(--bg); box-shadow: var(--sh-2);
  font-size: 12px; font-weight: 600; white-space: nowrap; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease);
}
.in-week-tip strong { font-weight: 800; }
.in-week:first-child .in-week-tip { left: 0; transform: translate(0, 4px); }
.in-week:nth-last-child(-n+2) .in-week-tip { left: auto; right: 0; transform: translate(0, 4px); }
.in-week:hover .in-week-tip { opacity: 1; transform: translate(-50%, 0); }
.in-week:first-child:hover .in-week-tip, .in-week:nth-last-child(-n+2):hover .in-week-tip { transform: none; }
/* The tooltip sits over the plot, so give the hover target the column's full height. */
.in-weeks-plot:hover .in-week:not(:hover) .in-week-bar { opacity: .35; }
.in-weeks-axis { display: flex; justify-content: space-between; margin-top: 8px; padding-right: 22px; font-size: 12px; font-weight: 650; color: var(--text-2); }
/* ================= Compare =================
   A bordered box that scrolls sideways on phones; the label column is sticky. */
.cmp { --lab: 104px; --colmin: 150px; --addw: 116px; }
@media (min-width: 768px) { .cmp { --lab: 168px; --colmin: 180px; --addw: 150px; } }
@media (min-width: 1024px) { .cmp { --lab: 188px; --colmin: 200px; --addw: 170px; } }

.cmp-back { margin: 0 0 8px -10px; color: var(--text-2); }
@media (min-width: 1024px) { .cmp-back { margin-top: -12px; } }

.cmp-scroll {
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.cmp-scroll:focus-visible { outline-offset: 2px; }

.cmp-table {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  min-width: calc(var(--lab) + var(--n, 2) * var(--colmin));
  font-size: 14px; line-height: 1.45;
}
.cmp-table.has-add { min-width: calc(var(--lab) + var(--n, 2) * var(--colmin) + var(--addw)); }
.cmp-corner { width: var(--lab); }
.cmp-add-cell { width: var(--addw); }

/* Sticky first column: opaque so values scroll underneath it */
.cmp-corner, .cmp-label, .cmp-group-label {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  box-shadow: inset -1px 0 0 var(--line);
}

/* Person header cells */
.cmp-person { padding: 16px 12px 14px; vertical-align: top; text-align: left; font-weight: inherit; border-bottom: 1px solid var(--line); }
.cmp-corner { border-bottom: 1px solid var(--line); }
.cmp-person + .cmp-person { border-left: 1px solid var(--line); }
.cmp-person-in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.cmp-person-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.cmp-remove { margin: -6px -6px 0 0; color: var(--text-3); }
.cmp-remove:hover { color: var(--text); }
.cmp-name {
  font-family: var(--font-display); font-size: 23px; line-height: 1.1; letter-spacing: -.01em; color: var(--text);
  max-width: 100%; overflow-wrap: anywhere;
}
.cmp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cmp-open { margin-top: 2px; padding: 0 10px 0 12px; gap: 2px; }
@media (min-width: 768px) {
  .cmp-person { padding: 20px 18px 16px; }
  .cmp-name { font-size: 27px; }
}

/* Add person */
.cmp-add-cell { padding: 12px; }
.cmp-add {
  width: 100%; min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-2); font-size: 13.5px; font-weight: 700;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.cmp-add:hover { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); }
.cmp-add-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.cmp-add:hover .cmp-add-icon { background: var(--surface); }

/* Group headings */
.cmp-group th, .cmp-group td { padding: 18px 12px 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cmp-group-label {
  text-align: left; font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap; box-shadow: none;
}
.cmp-group .cmp-group-label { background: var(--surface-2); }
.cmp-group-fill { box-shadow: none; }

/* Value rows */
.cmp-table tbody tr:not(.cmp-group) > * { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.cmp-label { text-align: left; font-size: 13px; font-weight: 650; color: var(--text-2); overflow-wrap: anywhere; }
.cmp-table td { color: var(--text-2); overflow-wrap: anywhere; }
.cmp-table td + td { border-left: 1px solid var(--line); }
.cmp-table tr.differs td { color: var(--text); font-weight: 600; }
.cmp-table tr.differs .cmp-label { color: var(--text); }
.cmp-table td.cmp-add-col { background: transparent; }
.cmp-empty { color: var(--text-3); font-weight: 500; }
.cmp-lines { display: flex; flex-direction: column; gap: 4px; }
.cmp-lines li { position: relative; padding-left: 12px; }
.cmp-lines li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.cmp-table .stars.readonly { gap: 1px; padding-top: 2px; }
@media (min-width: 768px) {
  .cmp-table tbody tr:not(.cmp-group) > * { padding: 12px 18px; }
  .cmp-group th, .cmp-group td { padding: 20px 18px 6px; }
  .cmp-label { font-size: 13.5px; }
  .cmp-table { font-size: 14.5px; }
}
@media (hover: hover) {
  .cmp-table tbody tr:not(.cmp-group):hover > td { background: var(--surface-2); }
  .cmp-table tbody tr:not(.cmp-group):hover > .cmp-label { background: var(--surface-2); }
}
/* Long stage names wrap inside narrow phone columns */
.cmp-tags .phase-tag { white-space: normal; align-items: baseline; }
.cmp-tags .phase-tag::before { transform: translateY(-1px); }
/* ================= Settings ================= */
.page.set-page { max-width: 1080px; }
.set-page .set-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.set-page .set-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (min-width: 1024px) {
  .set-page .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .set-page .set-col { gap: 32px; }
}
.set-page .set-group-title { margin: 0 4px 10px; }
.set-page .set-card { overflow: hidden; }
/* A short line under a group's card */
.set-page .set-note { margin: 10px 4px 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }

/* Rows: icon, text that wraps, control */
.set-page .set-row { align-items: center; gap: 14px; min-height: 68px; padding: 14px 16px; }
@media (min-width: 768px) { .set-page .set-row { padding: 16px 20px; } }
.set-page .set-row .row-main { gap: 3px; }
.set-page .set-title { font-weight: 750; font-size: 15px; line-height: 1.3; color: var(--text); }
.set-page .set-desc { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.set-page .set-control { flex-shrink: 0; display: flex; align-items: center; }

.set-page .set-ico {
  align-self: flex-start; flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
}
.set-page .set-ico.ok { background: var(--success-soft); color: var(--success); }
.set-page .set-ico.warn { background: var(--warning-soft); color: var(--warning); }
.set-page .set-ico.busy { background: var(--primary-soft); color: var(--primary-ink); }
.set-page .set-ico.muted { color: var(--text-3); }
.set-page .set-ico.danger { background: var(--danger-soft); color: var(--danger); }
.set-page .set-spin { animation: set-spin 1.2s linear infinite; }
@keyframes set-spin { to { transform: rotate(360deg); } }
.set-page .switch:disabled { opacity: .5; cursor: not-allowed; }
/* Placeholder row while a group checks this device */
.set-page .set-ico.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; }
.set-page .set-skel { display: block; height: 12px; width: 42%; border-radius: 6px; }
.set-page .set-skel.short { width: 72%; margin-top: 8px; }

/* A second, small control (a reminder's time): under the text on phones, beside the switch on wider screens */
.set-page .set-row.has-extra {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico main ctl" ". extra extra";
  column-gap: 14px; row-gap: 10px;
}
.set-page .set-row.has-extra > .set-ico { grid-area: ico; }
.set-page .set-row.has-extra > .row-main { grid-area: main; }
.set-page .set-row.has-extra > .set-control { grid-area: ctl; }
.set-page .set-row.has-extra > .set-extra { grid-area: extra; width: 148px; }
@media (min-width: 560px) {
  .set-page .set-row.has-extra { grid-template-columns: 36px minmax(0, 1fr) auto auto; grid-template-areas: "ico main extra ctl"; }
  .set-page .set-row.has-extra > .set-extra { width: 128px; }
}
.set-page .set-extra .dt-wrap .dt-trigger { min-height: 40px; padding: 0 12px; gap: 8px; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .set-page .set-extra .dt-wrap .dt-trigger { min-height: 44px; } }
/* A reminder always has a time, so there's nothing to clear */
.set-page .set-extra .dt-clear { display: none; }
#remSummaryTimePick .cal-chip.clear, #remNudgeTimePick .cal-chip.clear { display: none; }
#remSummaryTimePick .cal-chip.done, #remNudgeTimePick .cal-chip.done { margin-left: auto; }

/* Wide controls get their own line under the text */
.set-page .set-row.stack { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; }
.set-page .set-row.stack .set-control { grid-column: 2; }
.set-page .set-row.stack .segmented { width: 100%; }
.set-page .set-row.stack .segmented button { flex: 1; justify-content: center; padding: 0 6px; min-width: 0; height: 38px; white-space: nowrap; }
@media (max-width: 400px) { .set-page .set-row.stack .set-control { grid-column: 1 / -1; } }

/* Whole-row buttons */
.set-page .set-action { cursor: pointer; }
.set-page .set-action:hover .set-trail { color: var(--text-2); transform: translateX(2px); }
.set-page .set-trail { flex-shrink: 0; color: var(--text-3); transition: color var(--t-fast), transform var(--t) var(--ease); }
.set-page .set-action.danger .set-title { color: var(--danger); }
button.set-action.danger:hover { background: var(--danger-soft); }
/* …and ones that open a panel right below them (change password) */
.set-page .set-action[aria-expanded]:hover .set-trail { transform: none; }
.set-page .set-action[aria-expanded="true"] .set-trail,
.set-page .set-action[aria-expanded="true"]:hover .set-trail { transform: rotate(180deg); color: var(--text-2); }
.set-page .set-expand { padding: 2px 16px 18px 66px; }
@media (min-width: 768px) { .set-page .set-expand { padding: 2px 20px 20px 70px; } }
@media (max-width: 400px) { .set-page .set-expand { padding-left: 16px; } }

/* Account */
.set-page .set-account { min-height: 76px; }
.set-page .set-account-avatar { --tint-bg: var(--primary-soft); --tint-ink: var(--primary-ink); width: 44px; height: 44px; font-size: 21px; margin-right: -4px; }
.set-page .set-email { overflow-wrap: anywhere; }
/* Renaming the tracker: the field, then Cancel / Save (below it on phones) */
.set-page .set-rename .set-control { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
.set-page .set-rename .field { flex: 1 1 210px; }
.set-page .set-inline-actions { display: flex; gap: 6px; margin-left: auto; min-height: 46px; align-items: center; }

/* New password: Change password here, and the choose-your-password sheet */
.pw-form { display: flex; flex-direction: column; gap: 16px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 52px; }
.pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.pw-form .field.invalid .help { display: none; }
.pw-msg { font-size: 13px; font-weight: 600; color: var(--danger); }
.pw-msg:empty { display: none; }
.pw-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 767px) { .pw-actions .btn-primary { flex: 1; } }
.pw-sheet { display: flex; flex-direction: column; gap: 16px; }
.pw-sheet:focus { outline: none; }
.pw-note { overflow-wrap: anywhere; }
.pw-note strong { font-weight: 700; color: var(--text-2); }

/* Shortcuts only matter with a keyboard */
.set-page .set-keys kbd { margin: 0 2px; }
.set-page .set-sep { margin: 0 6px; color: var(--text-3); }
@media (max-width: 767px), (pointer: coarse) { .set-page .set-keys { display: none; } }

/* Colour theme picker */
.set-palettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.set-palette { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); min-height: 76px; transition: border-color var(--t-fast), background var(--t-fast); }
.set-palette:hover { border-color: var(--line-strong); background: var(--surface-2); }
.set-palette[aria-checked="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
.set-swatch { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .15); }
.set-palette-name { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.set-palette[aria-checked="true"] .set-palette-name { color: var(--text); }
/* ================= Family =================
   The Family screen (members, invites, your name, recent activity) and the family
   part of the proposal panel (reactions, comments). Family members get round
   monograms; proposals keep their rounded squares. */

/* ---------- Page ----------
   Phone and tablet: one column in a fixed order (the two column wrappers dissolve).
   Desktop: two columns. */
.page.fam-page { max-width: 1080px; }
.fam-grid { display: flex; flex-direction: column; gap: 28px; }
.fam-col { display: contents; }
.fam-group { min-width: 0; }
.fam-g-members { order: 1; }
.fam-g-waiting { order: 2; }
.fam-g-invite { order: 3; }
.fam-g-activity { order: 4; }
.fam-g-you { order: 5; }
@media (min-width: 1024px) {
  .fam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .fam-col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
  .fam-col > .fam-group { order: 0; }
  .fam-head-actions { display: none; }   /* the invite form is in view on desktop */
}
.fam-group-title { margin: 0 4px 10px; }
.fam-card { padding: 18px 16px; }
@media (min-width: 768px) { .fam-card { padding: 20px; } }
.fam-card-desc { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

/* ---------- Monograms ---------- */
.avatar.fam-avatar.xxs { width: 22px; height: 22px; font-size: 11.5px; }
.avatar.fam-avatar.is-pending { background: transparent; color: var(--text-3); border: 1.5px dashed var(--line-strong); }
.avatar.fam-avatar.is-unknown { background: var(--surface-3); color: var(--text-3); }
.fam-stack { display: inline-flex; align-items: center; }
.fam-stack .avatar { box-shadow: 0 0 0 2px var(--ring-bg, var(--surface)); }
.fam-stack .avatar + .avatar { margin-left: -6px; }
.fam-stack-more { margin-left: 4px; font-size: 11.5px; font-weight: 750; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- Role pills ---------- */
.pill.fam-role-pill { gap: 5px; height: 26px; padding: 0 10px 0 8px; }
.pill.fam-role-pill.is-owner { background: var(--accent-soft); color: var(--accent-ink); }
.pill.fam-role-pill.is-editor { background: var(--info-soft); color: var(--info); }
.pill.fam-role-pill.is-commenter { background: var(--surface-3); color: var(--text-2); }

/* ---------- Lists of people ---------- */
.fam-list { overflow: hidden; }
.fam-list > li + li { border-top: 1px solid var(--line); }
.fam-row { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; }
@media (min-width: 768px) { .fam-row { padding: 16px 20px; } }
.fam-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fam-row-title { display: flex; align-items: baseline; min-width: 0; font-size: 15px; font-weight: 750; line-height: 1.3; color: var(--text); }
.fam-row-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A long relation gives way before the name does. */
.fam-row-rel { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-2); }
.fam-row-rel::before { content: "·"; margin: 0 6px; color: var(--text-3); }
.fam-row-sub { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.fam-sub-part { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.fam-row-trail { flex-shrink: 0; }

/* The owner's controls get their own line under the name. */
.fam-row.has-tools { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; }
.fam-row-tools { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.fam-row-tools .segmented button { height: 32px; padding: 0 12px; font-size: 13px; }
@media (max-width: 479px) { .fam-row-tools { grid-column: 1 / -1; } }
.btn.fam-remove { color: var(--danger); margin-right: -6px; }
.btn.fam-remove:hover { background: var(--danger-soft); color: var(--danger); }

.fam-alone { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 13.5px; color: var(--text-2); background: var(--surface-2); }
.fam-alone svg { color: var(--primary-ink); }
@media (min-width: 768px) { .fam-alone { padding: 14px 20px; } }

.fam-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.fam-note svg { color: var(--text-3); margin-top: 2px; }
.fam-note strong { font-weight: 750; color: var(--text); }

/* Loading placeholders */
.fam-skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.fam-skel-line { display: block; height: 12px; width: 58%; border-radius: 6px; }
.fam-skel-line.short { width: 36%; margin-top: 8px; }
.fam-connecting { margin-top: 4px; }

/* ---------- Forms (invite, your name) ---------- */
.fam-invite, .fam-you { display: flex; flex-direction: column; gap: 18px; }
.fam-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 560px) {
  .fam-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .fam-span { grid-column: 1 / -1; }
}
.fam-fields .segmented { width: 100%; }
.fam-fields .segmented button { flex: 1; justify-content: center; height: 38px; padding: 0 8px; }
.fam-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 559px) { .fam-form-foot .btn { flex: 1 1 0; } }
.fam-form-err {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: var(--danger-soft); color: var(--danger); font-size: 13.5px; font-weight: 650; line-height: 1.4;
}
.fam-form-err svg { margin-top: 1px; }

.fam-you-head { display: flex; align-items: center; gap: 14px; }
.fam-you-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fam-you-as { font-size: 15px; font-weight: 600; color: var(--text-2); overflow-wrap: anywhere; }
.fam-you-as strong { font-weight: 750; color: var(--text); }

/* After inviting: the details to pass on */
.fam-result { display: flex; flex-direction: column; gap: 16px; scroll-margin: 84px 0 calc(var(--tabbar-h) + var(--safe-b) + 16px); }
.fam-result-head { display: flex; align-items: flex-start; gap: 14px; }
.fam-result-icon {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--success-soft); color: var(--success);
}
.fam-result-text { min-width: 0; }
.fam-result-title { font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fam-result-title:focus { outline: none; }
.fam-result-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.fam-result-text p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.fam-cred { display: flex; flex-direction: column; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.fam-cred-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-width: 0; }
.fam-cred-row + .fam-cred-row { border-top: 1px solid var(--line); }
.fam-cred dt { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.fam-cred-email { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
/* The password never breaks; Copy moves under it when there's no room beside it. */
.fam-pass-box { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.fam-pass {
  flex: 1 0 auto; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--text);
  white-space: nowrap; user-select: all; -webkit-user-select: all;
}
@media (max-width: 359px) { .fam-pass { font-size: 18px; } }
@media (min-width: 768px) { .fam-pass { font-size: 24px; letter-spacing: .02em; } }
.btn.fam-copy { flex-shrink: 0; min-width: 88px; }
.fam-result-warn { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--warning); }

/* ---------- Recent activity ---------- */
.fam-act {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; color: inherit;
  transition: background var(--t-fast);
}
.fam-act:hover { background: var(--surface-2); }
.fam-act:focus-visible { outline-offset: -3px; border-radius: 4px; }
@media (min-width: 768px) { .fam-act { padding: 15px 20px; } }
.fam-act-who { position: relative; flex-shrink: 0; }
.fam-act-badge {
  position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2); box-shadow: 0 0 0 2px var(--surface);
}
.fam-act:hover .fam-act-badge { box-shadow: 0 0 0 2px var(--surface-2); }
.fam-act-badge.is-comment { background: var(--primary-soft); color: var(--primary-ink); }
.fam-act-badge.is-likes { background: var(--success-soft); color: var(--success); }
.fam-act-badge.is-unsure { background: var(--warning-soft); color: var(--warning); }
.fam-act-badge.is-not_keen { background: var(--danger-soft); color: var(--danger); }
.fam-act-badge.is-log { background: var(--info-soft); color: var(--info); }
.fam-act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.fam-act-text { font-size: 14.5px; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.fam-act-text strong { font-weight: 750; color: var(--text); }
.fam-act-quote {
  font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fam-act-time { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.fam-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; padding: 0 16px;
  font-size: 14px; font-weight: 700; color: var(--primary-ink); transition: background var(--t-fast);
}
.fam-more:hover { background: var(--surface-2); }
.fam-more:focus-visible { outline-offset: -3px; border-radius: 4px; }
.fam-feed-empty { display: flex; align-items: center; gap: 14px; padding: 18px 16px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
@media (min-width: 768px) { .fam-feed-empty { padding: 20px; } }
.fam-feed-empty-icon {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary-ink);
}

/* ================= In the proposal panel ================= */
.fam-card-pp { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Reactions ---------- */
.fam-react-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .fam-react-row { gap: 10px; } }
.fam-react-btn {
  --rc: var(--text-2); --rbg: var(--surface-2); --ring-bg: var(--surface-2);
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 10px;
  min-width: 0; min-height: 76px; padding: 10px 10px 10px 12px; border-radius: 14px; text-align: left;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform .1s;
}
.fam-react-btn.is-likes { --rc: var(--success); --rbg: var(--success-soft); }
.fam-react-btn.is-unsure { --rc: var(--warning); --rbg: var(--warning-soft); }
.fam-react-btn.is-not_keen { --rc: var(--danger); --rbg: var(--danger-soft); }
.fam-react-btn:hover { border-color: var(--line-strong); background: var(--surface); --ring-bg: var(--surface); }
.fam-react-btn:active { transform: scale(.98); }
.fam-react-btn[aria-pressed="true"] {
  --ring-bg: var(--rbg);
  background: var(--rbg); border-color: color-mix(in srgb, var(--rc) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent);
}
.fam-react-top { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.fam-react-top svg { color: var(--rc); }
/* Three across a phone: a little tighter so "Not keen" fits. */
@media (max-width: 479px) {
  .fam-react-btn { padding: 10px 8px 9px 10px; }
  .fam-react-top { gap: 5px; font-size: 13.5px; letter-spacing: -.01em; }
  .fam-react-top svg { width: 16px; height: 16px; }
}
.fam-react-btn[aria-pressed="true"] .fam-react-top { color: var(--rc); }
.fam-react-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; }
.fam-react-n { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.fam-react-n.is-zero { color: var(--text-3); font-weight: 650; }
.fam-react-btn[aria-pressed="true"] .fam-react-n { color: var(--rc); }
/* The smallest phones: the icon goes above the label. */
@media (max-width: 374px) {
  .fam-react-row { gap: 6px; }
  .fam-react-btn { padding: 9px 7px 8px 9px; gap: 8px; }
  .fam-react-top { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; }
}
.fam-react-sum { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--text-2); }

/* ---------- Comments ---------- */
.fam-comments { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.fam-sub-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 750; color: var(--text); }
.fam-sub-title .n { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.fam-none { font-size: 14px; color: var(--text-2); }
.fam-thread { display: flex; flex-direction: column; gap: 12px; }
.fam-comment { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.fam-comment > .avatar { margin-top: 2px; }
.fam-bubble {
  flex: 0 1 auto; min-width: 0; padding: 8px 13px 10px; border-radius: 6px 16px 16px 16px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.fam-comment.is-mine .fam-bubble { background: var(--primary-soft); border-color: transparent; }
.fam-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; min-height: 20px; line-height: 1.35; }
.fam-comment-who { font-size: 13.5px; font-weight: 750; color: var(--text); }
.fam-comment-time { font-size: 12px; font-weight: 600; color: var(--text-3); }
.fam-comment.is-mine .fam-comment-time { color: var(--text-2); }
.fam-comment-body { margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Delete sits in your own bubble's header; the negative margins keep the bubble's padding. */
.fam-comment-del {
  display: grid; place-items: center; width: 32px; height: 32px; margin: -7px -9px -7px auto; border-radius: 10px;
  color: var(--text-2); transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.fam-comment-del:hover { color: var(--danger); background: var(--danger-soft); }
@media (hover: hover) and (pointer: fine) {
  .fam-comment-del { opacity: 0; }
  .fam-comment:hover .fam-comment-del, .fam-comment-del:focus-visible { opacity: 1; }
}

.fam-compose { display: flex; align-items: flex-end; gap: 10px; }
.fam-compose > .avatar { margin-bottom: 8px; }
.textarea.fam-compose-input {
  flex: 1; min-width: 0; min-height: 44px; height: 44px; padding: 10px 14px; border-radius: 14px;
  resize: none; line-height: 1.45; overflow-y: auto;
}
.fam-compose-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.fam-compose-post { flex-shrink: 0; min-height: 44px; padding: 0 18px; }
@media (max-width: 374px) { .fam-compose > .avatar { display: none; } .btn.fam-compose-post { padding: 0 14px; } }
/* ================= Proposal panel ================= */
.pp-scroll { position: relative; }
.pp-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 16px calc(var(--safe-b) + 40px);
}
@media (min-width: 768px) { .pp-body { gap: 18px; padding: 8px 32px 56px; } }

/* ---------- Sticky bar ---------- */
.pp-bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 2px;
  min-height: calc(56px + var(--safe-t)); padding: var(--safe-t) 6px 0;
  background: var(--bg); border-bottom: 1px solid transparent; transition: border-color var(--t), background var(--t);
}
.pp-bar.scrolled { border-bottom-color: var(--line); }
@media (min-width: 768px) { .pp-bar { min-height: 60px; padding: 0 16px 0 20px; } }
.pp-bar-name {
  flex: 1; min-width: 0; padding: 0 6px; font-weight: 750; font-size: 16px;
  opacity: 0; transform: translateY(4px); transition: opacity var(--t), transform var(--t) var(--ease);
}
.pp-bar.scrolled .pp-bar-name { opacity: 1; transform: none; }

/* ---------- Menus ---------- */
.pp-menu { position: relative; }
.pp-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; padding: 6px;
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-3); animation: pp-pop var(--t-fast) var(--ease);
}
.pp-menu-list [role="menuitem"] {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 650; color: var(--text); text-align: left; white-space: nowrap;
}
.pp-menu-list [role="menuitem"] svg { color: var(--text-2); }
.pp-menu-list [role="menuitem"]:hover, .pp-menu-list [role="menuitem"]:focus-visible { background: var(--surface-3); outline: none; }
.pp-menu-list [role="menuitem"].danger, .pp-menu-list [role="menuitem"].danger svg { color: var(--danger); }
.pp-menu-list [role="menuitem"].danger:hover, .pp-menu-list [role="menuitem"].danger:focus-visible { background: var(--danger-soft); }
@media (pointer: fine) { .pp-menu-list [role="menuitem"] { min-height: 38px; } }
@keyframes pp-pop { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Hero ---------- */
.pp-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 4px 0 6px; }
.pp-hero-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-name {
  font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1.04; letter-spacing: -.015em;
  overflow-wrap: anywhere; color: var(--text);
}
.pp-line { font-size: 15.5px; font-weight: 650; color: var(--text); margin-top: 4px; }
.pp-source { font-size: 14px; color: var(--text-2); }
.pp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.pp-since { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
@media (min-width: 768px) {
  .pp-hero { flex-direction: row; align-items: center; gap: 24px; padding: 8px 0 10px; }
  .pp-name { font-size: 42px; }
}

/* ---------- Quick actions ---------- */
.pp-qa { grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); }
.pp-qa { gap: 6px; }
.pp-qa .qa { min-height: 64px; padding: 6px 2px; background: var(--surface); box-shadow: var(--sh-1); font-size: 12px; white-space: nowrap; }
@media (min-width: 768px) { .pp-qa { gap: 10px; } .pp-qa .qa { min-height: 70px; font-size: 13px; } }

/* ---------- Cards and sections ---------- */
.pp-card { padding: 18px 16px; }
@media (min-width: 768px) { .pp-card { padding: 22px 24px; } }
.pp-card-title { margin-bottom: 14px; }
.pp-section { display: flex; flex-direction: column; margin-top: 10px; }
.pp-section .section-head { margin-bottom: 10px; }
.pp-section .section-head .btn-sm { margin-right: -4px; }
.pp-section .section-head .btn-ghost.btn-sm { color: var(--primary-ink); }
.pp-none { font-size: 14.5px; }

/* ---------- Family members who can only comment ---------- */
.pp-viewer-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: 13.5px; line-height: 1.45; color: var(--text-2);
}
.pp-viewer-note svg { color: var(--primary-ink); margin-top: 1px; }
.pp-rating.is-readonly { margin: 0; gap: 4px 12px; }
.pp-rating.is-readonly .stars { gap: 4px; }
.pp-file-foot > .pp-file-meta:only-child { padding: 3px 8px 3px 0; }

/* Progress */
.pp-journey { gap: 5px; }
.pp-journey span { height: 8px; border-radius: 4px; }
.pp-phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.pp-phases li {
  font-size: 11px; font-weight: 650; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.005em;
}
.pp-phases li.past { color: var(--text-2); }
.pp-phases li.current { color: var(--text); font-weight: 800; }
@media (min-width: 768px) { .pp-phases li { font-size: 12.5px; } }
.pp-kv { margin-top: 16px; border-top: 1px solid var(--line); }
.pp-kv > div { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); }
.pp-kv > div:last-child { border-bottom: 0; padding-bottom: 0; min-height: 44px; margin-bottom: -6px; }
.pp-kv dt { width: 64px; flex-shrink: 0; font-size: 13px; font-weight: 650; color: var(--text-2); }
.pp-kv dd { flex: 1; min-width: 0; }
.pp-kv dd .phase-tag { font-size: 14.5px; color: var(--text); white-space: normal; }
.pp-kv .btn { color: var(--primary-ink); margin-right: -8px; }

/* Next step */
.pp-next-text { font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -.015em; overflow-wrap: anywhere; }
.pp-next-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; font-size: 14px; }
.pp-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.pp-next-actions .btn-primary { flex: 1 1 0; min-width: 96px; }
.pp-edit { padding: 0 12px; }
@media (max-width: 767px) { .pp-edit { width: 44px; padding: 0; } .pp-edit-label { display: none; } }
.pp-next-actions .pp-cal { margin-left: auto; }
@media (min-width: 768px) { .pp-next-actions .btn-primary { flex: 0 0 auto; padding: 0 22px; } .pp-next-text { font-size: 24px; } }
.pp-next.is-overdue { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.pp-next-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pp-next-empty p { font-size: 15.5px; }

/* At a glance */
.pp-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.pp-metrics > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-metrics > div:nth-child(2n) { border-left: 1px solid var(--line); }
.pp-metrics > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.pp-metrics dt { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.pp-metrics dd { font-size: 17px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .pp-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-metrics > div { padding: 16px 20px; }
  .pp-metrics > div:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); }
  .pp-metrics > div:first-child { border-left: 0; }
}

/* Details */
.pp-details { display: flex; flex-direction: column; gap: 18px; }
.pp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
@media (min-width: 768px) { .pp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; } }
.pp-facts dt svg { color: var(--text-3); }
.pp-facts dt { color: var(--text-2); }
.pp-para { border-top: 1px solid var(--line); padding-top: 14px; }
.pp-para h4 { font-size: 12.5px; font-weight: 650; color: var(--text-2); margin-bottom: 4px; }
.pp-para p { font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.pp-contact-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex-shrink: 0; }
.pp-contact-main { flex: 1; min-width: 150px; display: flex; flex-direction: column; }
.pp-contact-label { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.pp-contact-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.pp-contact-name .muted { font-weight: 550; }
.pp-tel { font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .pp-tel { width: 100%; min-height: 44px; } }

.pp-invite {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 16px; text-align: left;
  border-style: dashed; border-color: var(--line-strong); box-shadow: none; background: var(--surface-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pp-invite:hover { border-color: var(--primary); background: var(--surface); }
.pp-invite-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); flex-shrink: 0; }
.pp-invite-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-invite-text strong { font-size: 15px; font-weight: 750; }
.pp-invite-text span { font-size: 13.5px; color: var(--text-2); }

/* Your take */
.pp-take { display: flex; flex-direction: column; gap: 18px; }
.pp-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: -6px 0 0 -8px; }
.pp-rating .muted { font-size: 13.5px; font-weight: 650; }
.pp-proscons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
@media (min-width: 768px) { .pp-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.pp-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-list-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 750; }
.pp-list-title .n { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.pp-list-mark { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; }
.pp-list-pro .pp-list-mark { background: var(--success-soft); color: var(--success); }
.pp-list-con .pp-list-mark { background: var(--danger-soft); color: var(--danger); }
.pp-list ul { display: flex; flex-direction: column; }
.pp-list li {
  display: flex; align-items: flex-start; gap: 6px; padding: 6px 0 6px 28px; position: relative;
  font-size: 14.5px; line-height: 1.45; border-bottom: 1px solid var(--line);
}
.pp-list li::before { content: ""; position: absolute; left: 8px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.pp-list-pro li::before { background: var(--success); }
.pp-list-con li::before { background: var(--danger); }
.pp-list-text { flex: 1; min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.pp-list li .icon-btn { margin: -4px -6px -4px 0; color: var(--text-3); }
.pp-list li .icon-btn:hover { color: var(--danger); }
.pp-add { display: flex; gap: 8px; margin-top: 4px; }
.pp-add .input { flex: 1; min-width: 0; min-height: 44px; }
.pp-add .btn { flex-shrink: 0; min-height: 44px; }

/* Notes */
.pp-note { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }

/* ---------- Timeline ---------- */
.pp-tl { display: flex; flex-direction: column; gap: 18px; }
.pp-tl-empty { font-size: 14.5px; }
.pp-tl-date { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 750; color: var(--text); margin-bottom: 8px; }
.pp-tl-date span { font-weight: 600; color: var(--text-2); font-size: 12.5px; }
.pp-tl-group ul { display: flex; flex-direction: column; }
.pp-tl-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 6px 0 10px; }
/* the rail between icons */
.pp-tl-item:not(:last-child)::before {
  content: ""; position: absolute; left: 18px; top: 46px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--line);
}
.pp-tl-icon {
  --tc: var(--text-2); --tbg: var(--surface-3);
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--tbg); color: var(--tc);
}
.pp-tl-item[data-type="Call"] .pp-tl-icon { --tc: var(--info); --tbg: var(--info-soft); }
.pp-tl-item[data-type="Chat"] .pp-tl-icon { --tc: var(--success); --tbg: var(--success-soft); }
.pp-tl-item[data-type="Meeting"] .pp-tl-icon { --tc: var(--primary-ink); --tbg: var(--primary-soft); }
.pp-tl-item[data-type="Family"] .pp-tl-icon { --tc: var(--accent-ink); --tbg: var(--accent-soft); }
.pp-tl-body { flex: 1; min-width: 0; padding-top: 7px; }
.pp-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pp-tl-type { font-size: 14.5px; font-weight: 750; }
.pp-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-edited { font-size: 12px; font-weight: 600; font-style: italic; color: var(--text-3); }
.pp-tl-note { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-tl-actions { display: flex; gap: 0; flex-shrink: 0; margin: 0 -8px 0 0; transition: opacity var(--t-fast); }
.pp-tl-actions .icon-btn { color: var(--text-3); }
.pp-tl-actions .icon-btn:hover { color: var(--text); }
.pp-tl-item.is-system { align-items: center; padding: 0 0 4px; min-height: 36px; }
.pp-tl-dot { width: 38px; display: grid; place-items: center; flex-shrink: 0; }
.pp-tl-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.pp-tl-item.is-system::before { top: 26px; }
.pp-tl-sys { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.pp-tl-sys span { color: var(--text-3); }
/* Who added it (shared tracker) */
.pp-tl-by { font-size: 13px; font-weight: 650; color: var(--text-3); }
.pp-tl-sys .pp-tl-by { font-size: inherit; }
@media (hover: hover) and (pointer: fine) {
  .pp-tl-actions { opacity: 0; }
  .pp-tl-item:hover .pp-tl-actions, .pp-tl-item:focus-within .pp-tl-actions { opacity: 1; }
}

/* ---------- Files ---------- */
.pp-files { position: relative; border-radius: var(--r-lg); }
.pp-files.is-over { outline: 2px dashed var(--primary); outline-offset: 6px; }
.pp-drop-hint {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-lg); background: var(--primary-soft); color: var(--primary-ink); font-weight: 750; pointer-events: none;
}
.pp-files-note {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); font-size: 13.5px;
}
.pp-drop {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 16px; border-radius: var(--r-lg); text-align: left;
  border: 1px dashed var(--line-strong); background: var(--surface-2); color: var(--text-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pp-drop:hover { border-color: var(--primary); background: var(--surface); }
.pp-drop > svg { color: var(--primary-ink); }
.pp-drop strong { display: block; color: var(--text); font-size: 15px; font-weight: 750; }
.pp-drop-sub { display: block; font-size: 13.5px; }
.pp-file-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .pp-file-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-file {
  position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.pp-file-open { position: relative; display: block; width: 100%; padding: 0; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.pp-file-thumb {
  display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-3); color: var(--text-2);
  transition: filter var(--t-fast);
}
.pp-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-file-open:hover .pp-file-thumb { filter: brightness(.96); }
.pp-file-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-2); }
.pp-file-ph svg { color: var(--danger); }
.pp-file-badge {
  position: absolute; left: 8px; top: 8px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); display: inline-flex; align-items: center;
  background: var(--surface); color: var(--primary-ink); font-size: 11.5px; font-weight: 750; box-shadow: var(--sh-1);
}
.pp-file-foot { display: flex; align-items: center; gap: 2px; padding: 6px 4px 6px 12px; min-width: 0; }
.pp-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-file-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-file-size { font-size: 12px; color: var(--text-2); }
/* The file menu opens above the tile, anchored to the tile so it stays on screen. */
.pp-file-menu { position: static; }
.pp-file-menu .pp-menu-list { min-width: 0; width: 210px; top: auto; bottom: calc(100% - 44px); left: 6px; right: auto; }
.pp-file:nth-child(2n) .pp-file-menu .pp-menu-list { left: auto; right: 6px; }
@media (min-width: 560px) {
  .pp-file:nth-child(n) .pp-file-menu .pp-menu-list { left: 6px; right: auto; }
  .pp-file:nth-child(3n) .pp-file-menu .pp-menu-list { left: auto; right: 6px; }
}
.pp-file.is-uploading .pp-file-thumb { background: var(--surface-2); }
.pp-spinner {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary);
  animation: pp-spin .9s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }
/* ================= Sheets: forms and small pickers =================
   Shared by the proposal form, log entry, follow-up, stage, status, snooze, share
   and file viewer sheets. Components.css loads after this file, so overrides of its
   classes use two-class selectors. */

/* Tall form sheet on phones (the add / edit proposal form) */
@media (max-width: 767px) {
  .sheet.sh-tall { height: calc(100dvh - 12px - var(--safe-t)); max-height: none; }
}

/* A form inside the sheet body; the footer's submit button points at it with form="…". */
.sheet .sh-form { display: flex; flex-direction: column; gap: 26px; flex: 0 0 auto; }
.sheet .sh-form.sh-compact { gap: 20px; }
.sh-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sh-section + .sh-section { padding-top: 24px; border-top: 1px solid var(--line); }
.sh-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sh-section-head .help { font-size: 12.5px; }
.sh-stack { display: flex; flex-direction: column; gap: 14px; }

.sh-grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 768px) { .sh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.sh-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 560px) { .sh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.grid-2 .span-2, .sh-grid-2 .span-2 { grid-column: 1 / -1; }
.grid-2.sh-details { gap: 14px 12px; }

.sh-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field .sh-label-row > label { font-size: 13px; font-weight: 700; color: var(--text); }
.field .sh-label-row > label .opt { color: var(--text-3); font-weight: 550; }
.sh-count { font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sh-count.near { color: var(--warning); }

/* "Add details" reveal */
.sh-reveal {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px 10px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: transparent; color: var(--text-2);
  text-align: left; font-size: 14.5px; font-weight: 650; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.sh-reveal:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.sh-reveal-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-ink);
}
.sh-reveal .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sh-reveal small { font-size: 12.5px; font-weight: 550; color: var(--text-3); }

/* Phones: the ✕ already closes a sheet, so Cancel makes way when the footer is crowded. */
@media (max-width: 767px) { .sheet-foot .sh-cancel.sh-cancel { display: none; } }
.sheet-foot .sh-icon-text { gap: 7px; }
@media (max-width: 767px) {
  .sheet-foot .sh-icon-only { width: 44px; padding: 0; flex: 0 0 auto; }
  .sheet-foot .sh-icon-only .sh-btn-text { display: none; }
}

/* Interaction type picker: 3 + 2 on phones, one row of five from 560px */
.sh-types { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sh-types .sh-type { grid-column: span 2; }
.sh-types .sh-type:nth-child(n + 4) { grid-column: span 3; }
@media (min-width: 560px) {
  .sh-types { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sh-types .sh-type, .sh-types .sh-type:nth-child(n + 4) { grid-column: auto; }
}
.sh-type {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: 8px 6px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: 13px; font-weight: 650; line-height: 1.2; text-align: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.sh-type:hover { border-color: var(--line-strong); color: var(--text); }
.sh-type svg { color: var(--text-3); transition: color var(--t-fast); }
.sh-type[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary); }
.sh-type[aria-pressed="true"] svg { color: var(--primary-ink); }

/* Duration */
.sh-duration { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sh-duration .suffix-wrap { width: 132px; flex-shrink: 0; }
.sh-duration .quick { flex: 1 1 220px; }
@media (max-width: 559px) { .sh-duration .suffix-wrap { width: 100%; } }
.sh-duration input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.sh-duration input[type="number"]::-webkit-inner-spin-button,
.sh-duration input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Follow-up suggestion chips with icons */
.quick.sh-suggest button { display: inline-flex; align-items: center; gap: 6px; }
.quick.sh-suggest svg { color: var(--text-3); }
.quick.sh-suggest button[aria-pressed="true"] svg, .quick.sh-suggest button:hover svg { color: currentColor; }

/* Stage and status pickers */
.sh-phases { display: flex; flex-direction: column; gap: 18px; }
.sh-phase { display: flex; flex-direction: column; gap: 8px; }
.sh-phase-head { display: flex; align-items: center; gap: 8px; }
.sh-phase-head::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.choices.sh-stage-list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .choices.sh-stage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-stage-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.choice .sh-choice-label { flex: 1; min-width: 0; }
.choice.sh-choice { min-height: 52px; }
.choice.sh-choice .cur { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.choice.sh-choice.is-current .choice-desc { color: var(--primary-ink); opacity: .85; }

.sh-status-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.sh-status-ico::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.choice.sh-choice .sh-choice-label strong { display: block; font-weight: 750; }

/* Dot before a status in the Select */
.sh-dot { width: 9px; height: 9px; border-radius: 50%; }
.sh-dot[class*="st-"] { background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }

/* Snooze */
.choice.sh-snooze { min-height: 60px; padding: 10px 16px 10px 12px; }
.sh-snooze-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.sh-when { flex-shrink: 0; font-size: 13.5px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.choice.sh-snooze:hover .sh-snooze-ico { background: var(--primary-soft); color: var(--primary-ink); }

/* Share */
.sh-preview {
  margin: 0; max-height: min(38dvh, 320px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line);
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}
.sh-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sh-tile {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px 10px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); text-align: left; font-size: 14px; font-weight: 700; color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), transform .1s;
}
.sh-tile:hover { background: var(--surface-2); border-color: var(--line-strong); }
.sh-tile:active { transform: scale(.99); }
.sh-tile-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.sh-tile.sh-tile-main .sh-tile-ico { background: var(--primary); color: var(--on-primary); }

/* File viewer */
.sheet.sh-file .sheet-title { font-size: 24px; overflow-wrap: anywhere; }
.sh-file-stage {
  position: relative; display: grid; place-items: center; min-height: 260px; border-radius: var(--r-md);
  background: var(--surface-3); overflow: hidden;
}
.sh-file-stage img { display: block; max-width: 100%; max-height: min(64dvh, 680px); object-fit: contain; opacity: 0; transition: opacity var(--t) var(--ease); }
.sh-file-stage img.ready { opacity: 1; }
.sh-file-stage .skeleton { position: absolute; inset: 0; border-radius: 0; }
.sh-file-state { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 24px; text-align: center; color: var(--text-2); font-size: 14px; max-width: 36ch; }
.sh-file-state .sh-tile-ico { background: var(--surface); color: var(--text-2); }
.sh-photo-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--success); }
@media (max-width: 767px) { .sheet-foot .sh-grow-sm { flex: 1 1 auto; min-width: 0; } }
.help.sh-fu-hint { display: flex; align-items: center; gap: 6px; margin-top: -4px; }
@media (max-width: 400px) { .sh-hide-xs { display: none; } }
/* ================= Fill from a biodata =================
   The card at the top of the proposal form (choose or drop, reading, filled, problem)
   and the tint on the fields it filled. Components.css can load after this file, so
   overrides of its classes use two-class selectors. */

.bd { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bd:focus { outline: none; }
.bd:focus-visible .bd-card { box-shadow: 0 0 0 3px var(--ring); }
.bd-slot { position: relative; }

/* One layout for every state: icon tile, text, an action at the end */
.bd-card {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px;
  padding: 14px 16px 14px 14px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-2); text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform .1s;
  animation: bd-in var(--t) var(--ease);
}
@keyframes bd-in { from { opacity: 0; transform: translateY(3px); } }
.bd-ico {
  position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  overflow: hidden; background: var(--primary-soft); color: var(--primary-ink);
}
.bd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-title { font-size: 15px; font-weight: 750; line-height: 1.35; letter-spacing: -.005em; color: var(--text); }
.bd-sub { font-size: 13.5px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.bd-side { flex-shrink: 0; }
/* The file, or what to do next: a full-width row on phones, under the text on wider
   screens, and at the end of the card in the wide dialog */
.bd-card.is-done, .bd-card.is-error { flex-wrap: wrap; align-items: flex-start; row-gap: 12px; }
.bd-row { flex: 0 0 100%; min-width: 0; }
@media (min-width: 560px) { .bd-row { flex-basis: calc(100% - 56px); margin-left: 56px; } }
@media (min-width: 768px) {
  .bd-card.is-done, .bd-card.is-error { flex-wrap: nowrap; align-items: center; }
  .bd-row { flex: 0 1 auto; margin-left: 0; }
  .bd-row.bd-file { max-width: 50%; }
}

/* Ready: the whole card is the button (and a drop zone on computers) */
.bd-card.bd-pick {
  border-style: dashed; border-color: color-mix(in srgb, var(--primary) 32%, var(--line-strong));
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
}
.bd-pick .bd-ico { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 24%, transparent); }
.bd-card.bd-pick:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 85%, var(--surface)); }
.bd-card.bd-pick:active { transform: scale(.996); }
.bd-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 38px; height: 38px;
  border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: var(--sh-1);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.bd-cta > span { display: none; }
.bd-pick:hover .bd-cta { border-color: var(--primary); color: var(--primary-ink); }
@media (min-width: 560px) {
  .bd-cta { width: auto; padding: 0 14px; }
  .bd-cta > span { display: inline; }
}
.bd-drop-hint { display: none; }   /* "Upload or drop…" where there's a mouse to drag with */
@media (hover: hover) and (pointer: fine) { .bd-drop-hint { display: inline; } }
.bd.is-over .bd-card { border-style: solid; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.bd-over {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-lg); border: 2px dashed var(--primary); background: var(--primary-soft); color: var(--primary-ink);
  font-size: 15px; font-weight: 750; pointer-events: none;
}

/* Reading: a line scanning the page, and a bar that fills over the ~20 seconds */
.bd-scan {
  position: absolute; left: 10px; right: 10px; top: 10px; height: 2px; border-radius: 2px; background: currentColor;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--primary-ink) 45%, transparent);
  animation: bd-scan 1.5s ease-in-out infinite alternate;
}
@keyframes bd-scan { to { transform: translateY(20px); } }
.bd-bar { position: relative; height: 4px; margin-top: 9px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.bd-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 92%; border-radius: inherit; background: var(--primary);
  animation: bd-fill 20s cubic-bezier(.2, .6, .35, 1) both;
}
.bd-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent);
  transform: translateX(-100%); animation: bd-shine 1.8s ease-in-out infinite;
}
@keyframes bd-fill { from { width: 3%; } }
@keyframes bd-shine { to { transform: translateX(100%); } }
/* Without motion the bar would sit nearly full from the start: the words say enough. */
@media (prefers-reduced-motion: reduce) { .bd-bar { display: none; } }

/* Filled: what happened, and the file with Remove */
.bd-card.is-done { border-color: color-mix(in srgb, var(--success) 28%, var(--line)); background: color-mix(in srgb, var(--success-soft) 50%, var(--surface)); }
.bd-card.is-done .bd-ico { background: var(--success); color: var(--surface); }
.bd-card.is-done.is-empty { border-color: var(--line); background: var(--surface-2); }
.bd-card.is-done.is-empty .bd-ico { background: var(--surface-3); color: var(--text-2); }
.bd-file {
  display: flex; align-items: center; gap: 8px; padding: 3px 3px 3px 10px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3);
}
.bd-file-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-file-size { flex-shrink: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.btn.bd-remove { flex-shrink: 0; padding: 0 10px; }

/* Something went wrong */
.bd-card.is-error { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); }
.bd-card.is-error .bd-ico { background: var(--danger); color: var(--surface); }
.bd-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.bd-note { display: flex; align-items: flex-start; gap: 6px; padding: 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.bd-note svg { margin-top: 2px; }

/* Fields filled from the biodata: tinted until edited; amber where the reader wasn't sure */
.field.bd-from .input, .field.bd-from .textarea {
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-strong));
  animation: bd-glow 1.4s var(--ease);
}
.field.bd-check .input, .field.bd-check .textarea {
  background: color-mix(in srgb, var(--warning-soft) 75%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line-strong));
  animation: bd-glow-check 1.4s var(--ease);
}
.field.bd-from .input:focus, .field.bd-from .textarea:focus,
.field.bd-check .input:focus, .field.bd-check .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
@keyframes bd-glow { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); } }
@keyframes bd-glow-check { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 28%, transparent); } }
.bd-hint { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--primary-ink); }
.bd-hint svg { margin-top: 1.5px; }
.bd-hint.is-check { color: var(--warning); }
/* ================= Sign-in screen and app lock =================
   Both are full-screen pages on the warm ground, above the app (lock above sign-in),
   below toasts. */

/* ---------- Sign in ---------- */
.auth-screen {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.auth-inner {
  /* margin:auto centres it when there is room and lets it scroll when the keyboard is up */
  margin: auto; width: 100%; max-width: 432px;
  padding: calc(32px + var(--safe-t)) 16px calc(28px + var(--safe-b));
  display: flex; flex-direction: column;
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
.auth-brand .brand-mark { width: 40px; height: 40px; border-radius: 12px; }
.auth-brand .brand-name { font-size: 25px; }
.auth-title {
  font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1.02; letter-spacing: -.015em;
}
.auth-sub { margin-top: 10px; color: var(--text-2); font-size: 15.5px; max-width: 34ch; }
.auth-card { margin-top: 28px; padding: 20px; box-shadow: var(--sh-2); }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-pw { position: relative; }
.auth-pw .input { padding-right: 52px; }
.auth-pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.auth-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.auth-msg { min-height: 1.5em; font-size: 13.5px; color: var(--text-2); text-align: center; white-space: pre-line; }
.auth-msg:empty { min-height: 0; margin-top: -16px; }
.auth-msg.error { color: var(--danger); font-weight: 600; }
.auth-foot { margin-top: 24px; font-size: 13px; color: var(--text-2); text-align: center; }
.auth-foot svg { display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--text-3); }

@media (min-width: 768px) {
  .auth-inner { padding-top: 48px; padding-bottom: 48px; }
  .auth-brand { margin-bottom: 48px; }
  .auth-title { font-size: 54px; }
  .auth-card { padding: 28px; }
}

/* ---------- App lock ---------- */
.lock-screen {
  position: fixed; inset: 0; z-index: 110; background: var(--bg);
  display: flex; overflow-y: auto; overscroll-behavior: contain;
}
.lock-inner {
  margin: auto; width: 100%; max-width: 400px; text-align: center;
  padding: calc(40px + var(--safe-t)) 24px calc(32px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center;
}
.lock-inner .lock-mark { width: 64px; height: 64px; border-radius: 20px; box-shadow: var(--sh-2); }
.lock-title {
  margin-top: 28px; font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1.05; letter-spacing: -.015em;
}
.lock-sub { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }
.lock-btn { margin-top: 32px; min-width: 220px; }
.lock-err { min-height: 22px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--danger); }
.lock-foot { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lock-signout {
  min-height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--text-2);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px;
  transition: color var(--t-fast), background var(--t-fast);
}
.lock-signout:hover { color: var(--text); background: var(--surface-3); }
.lock-note { max-width: 30ch; font-size: 13px; color: var(--text-3); }
@media (min-width: 768px) { .lock-title { font-size: 46px; } }

/* "Sign out instead" can ask to confirm (unsynced changes); lift that dialog above the lock. */
body:has(#lockScreen:not([hidden])) #confirmOverlay { z-index: 115; }

.auth-hint { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-3); text-align: center; text-wrap: pretty; }