/* =========================================================================
   KCC Simulation 2.0 - candidate interface
   Design tokens and layout taken from the approved mockup
   (KCC_Simulation_2.0_Preview). Scoped under .ts-v2 so it cannot reach the
   v1 template or the surrounding theme.
   ========================================================================= */

.ts-v2 {
  --paper:#F5F3EE; --ink:#16202E; --body:#3C4654; --muted:#5A6472;
  --line:#E3E0D8; --line2:#EEEBE4; --field:#D8D4CA; --fill:#FAF9F6;
  --accent:#2E7C8F; --accent-soft:#E4EEF0; --accent-mid:#A9CAD3; --accent-dark:#1F5461;
  --green:#2F6B3E; --green-soft:#E3F0E6;
  --amber:#7A3A03; --amber-soft:#FCEFD9;
  --red:#9B1C12; --red-soft:#FDE8E6;
  --kcc:#357A8C;
  --serif:"Newsreader","Lora",Georgia,serif;
  --sans:"IBM Plex Sans","Segoe UI","Helvetica Neue","Liberation Sans",sans-serif;
}

/* The theme wraps the template in its own containers; this takes the page
   over completely so the simulation owns the whole viewport.

   Only the theme's own chrome is hidden here, never a wrapper element.
   .ts-v2 is rendered inside the theme's #wrapper, and display:none on an
   ancestor hides a fixed descendant too, however high its z-index - so
   hiding the wrapper would blank the whole simulation. The fixed, opaque
   .ts-v2 layer covers whatever is left of the theme anyway. */
body.ts-v2-active { margin:0; overflow:hidden; }
body.ts-v2-active .site-header,
body.ts-v2-active .site-footer,
body.ts-v2-active #nav-main,
body.ts-v2-active .kad-header,
body.ts-v2-active #kad-banner,
body.ts-v2-active .kad-mobile-nav,
body.ts-v2-active #topbar,
body.ts-v2-active footer { display:none !important; }

.ts-v2{
  position:fixed; inset:0; z-index:99999;
  display:flex; flex-direction:column;
  background:var(--paper);
  font-family:var(--sans); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.ts-v2 *{ box-sizing:border-box; }
.ts-v2 button,.ts-v2 input,.ts-v2 textarea,.ts-v2 select{ font-family:inherit; font-size:inherit; color:inherit; }
.ts-v2 button{ cursor:pointer; }
.ts-v2 :focus-visible{ outline:2px solid var(--accent-dark); outline-offset:2px; }
.ts-v2 .ic{ flex-shrink:0; display:block; }
.ts-v2 .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ts-v2 [hidden]{ display:none !important; }

/* ---------- top bar ---------- */
.ts-v2 .top{
  height:64px; flex-shrink:0; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid var(--line);
}
.ts-v2 .brand{ display:flex; align-items:center; gap:16px; }
.ts-v2 .kcc{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--kcc); color:#fff; letter-spacing:1.5px; font-weight:400;
  width:54px; height:30px; font-size:15px; border-radius:4px;
}
.ts-v2 .divider{ width:1px; height:28px; background:var(--line); }
.ts-v2 .story{ display:flex; align-items:center; gap:10px; }
.ts-v2 .mono{
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font-family:var(--serif); font-size:18px; font-weight:600;
}
.ts-v2 .story b{ display:block; font-size:14px; }
.ts-v2 .story small{ display:block; font-size:12px; color:var(--muted); }
.ts-v2 .top-right{ display:flex; align-items:center; gap:14px; }

.ts-v2 .timer{
  position:relative; display:flex; align-items:center; gap:8px;
  height:40px; padding:0 14px; border-radius:10px; overflow:hidden;
  background:#fff; border:1px solid var(--field); color:var(--ink);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.ts-v2 .timer strong{ font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.ts-v2 .timer small{ font-size:12px; }
.ts-v2 .timer i{ position:absolute; left:0; bottom:0; height:3px; background:var(--accent); transition:width 1s linear; }
.ts-v2 .timer.warning{ background:var(--amber-soft); border-color:#EFC68C; color:var(--amber); }
.ts-v2 .timer.warning i{ background:#C2410C; }
.ts-v2 .timer.final{ background:var(--red-soft); border-color:#F2B2AB; color:var(--red); }
.ts-v2 .timer.final i{ background:#B42318; }

.ts-v2 .who{ display:flex; align-items:center; gap:8px; font-size:14px; }
.ts-v2 .av{
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-dark); font-weight:600; flex-shrink:0;
  width:32px; height:32px; font-size:12px;
}
.ts-v2 .btn-ink{ height:40px; padding:0 18px; border-radius:10px; border:none; background:var(--ink); color:#fff; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.ts-v2 .btn-line{ height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--field); background:#fff; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:8px; }
.ts-v2 .btn-acc{ height:40px; padding:0 18px; border-radius:10px; border:none; background:var(--accent); color:#fff; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.ts-v2 .btn-ink:disabled,.ts-v2 .btn-acc:disabled{ background:#E6E2D9; color:var(--muted); cursor:not-allowed; }

/* ---------- body + rail ---------- */
.ts-v2 .body{ flex-grow:1; min-height:0; display:flex; }
.ts-v2 .rail{
  width:200px; flex-shrink:0; padding:16px 12px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:#fff; border-right:1px solid var(--line);
}
.ts-v2 .rail nav{ display:flex; flex-direction:column; gap:4px; }
.ts-v2 .rail nav button{
  display:flex; align-items:center; gap:12px; height:44px; padding:0 12px;
  border-radius:10px; border:none; background:transparent; color:var(--body);
  font-size:14px; font-weight:500; text-align:left; width:100%;
}
.ts-v2 .rail nav button:hover{ background:var(--paper); }
.ts-v2 .rail nav button[aria-current="page"]{ background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.ts-v2 .rail nav .count{
  margin-left:auto; min-width:22px; height:22px; padding:0 7px; border-radius:11px;
  background:var(--accent); color:#fff; font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.ts-v2 .saved{ padding:14px; border-radius:12px; background:var(--paper); }
.ts-v2 .saved b{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--green); }
.ts-v2 .saved p{ margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }

/* ---------- panels ---------- */
.ts-v2 .panel{ flex-grow:1; min-width:0; display:none; }
.ts-v2 .panel.on{ display:flex; }
.ts-v2 .page{ flex-grow:1; min-width:0; padding:30px 40px; display:flex; flex-direction:column; gap:24px; overflow:auto; }
.ts-v2 .page h1{ margin:0; font-family:var(--serif); font-size:34px; line-height:1.15; font-weight:500; max-width:820px; }
.ts-v2 .card{ background:#fff; border:1px solid var(--line); border-radius:16px; }

/* ---------- modal + toast ---------- */
.ts-v2 .scrim{ position:absolute; inset:0; background:rgba(22,32,46,.45); display:flex; align-items:center; justify-content:center; z-index:20; }
.ts-v2 .dialog{ width:460px; max-width:calc(100vw - 48px); padding:28px; border-radius:16px; background:#fff; box-shadow:0 20px 50px rgba(22,32,46,.25); }
.ts-v2 .dialog h2{ margin:0 0 12px; font-family:var(--serif); font-size:26px; font-weight:500; }
.ts-v2 .dialog p{ margin:0 0 20px; font-size:15px; line-height:1.6; color:var(--body); }
.ts-v2 .dialog .row-end{ display:flex; justify-content:flex-end; gap:10px; }
.ts-v2 .toast{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px;
  background:var(--ink); color:#fff; font-size:14px; box-shadow:0 12px 30px rgba(22,32,46,.3);
  animation:ts-toast-in .25s ease-out;
}
@keyframes ts-toast-in{ from{opacity:0; transform:translate(-50%,8px);} to{opacity:1; transform:translate(-50%,0);} }
@media (prefers-reduced-motion:reduce){ .ts-v2 .toast{ animation:none; } .ts-v2 .timer i{ transition:none; } }

/* ---------- welcome ---------- */
.ts-v2 .welcome{ flex-grow:1; display:flex; flex-direction:column; overflow:auto; }
/* The mockup is a fixed 1360px canvas. Letting the welcome span a 1080p
   screen instead stretched the left column well past its design width, so
   the video and the sign-in card drifted apart and the spacing stopped
   matching. Capping it to the design width and centring restores the
   intended proportions on any monitor. */
.ts-v2 .w-top{ height:72px; padding:0 64px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; width:100%; max-width:1360px; margin:0 auto; }
.ts-v2 .w-top .kcc{ width:60px; height:34px; font-size:17px; }
.ts-v2 .w-main{ flex-grow:1; padding:8px 64px 40px; display:flex; gap:56px; align-items:flex-start; width:100%; max-width:1360px; margin:0 auto; }
.ts-v2 .w-left{ flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:20px; }
.ts-v2 .pill{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:15px; background:var(--accent-soft); color:var(--accent-dark); font-size:13px; font-weight:600; }
.ts-v2 .w-left h1{ margin:0; max-width:640px; font-family:var(--serif); font-size:48px; line-height:1.08; font-weight:500; letter-spacing:-.4px; }
.ts-v2 .w-left .lede{ margin:0; max-width:560px; font-size:17px; line-height:1.6; color:var(--body); }

/* The welcome copy is the client's own HTML and each simulation writes it
   differently - some open with an <h2>, some an <h1>, some just a bold <p>.
   Style by position rather than by tag so whichever they used gets the
   headline treatment from the mockup, and the rest reads as the lede.
   Inline colours in their markup (the red "watch the video" line) still
   win over these rules, which is intended. */
.ts-v2 .w-left .ts-v2-rich{ display:flex; flex-direction:column; gap:14px; max-width:640px; }
.ts-v2 .w-left .ts-v2-rich > :first-child{
  margin:0; font-family:var(--serif); font-size:48px; line-height:1.08;
  font-weight:500; letter-spacing:-.4px; color:var(--ink);
}
.ts-v2 .w-left .ts-v2-rich h1,
.ts-v2 .w-left .ts-v2-rich h2,
.ts-v2 .w-left .ts-v2-rich h3{
  margin:0; font-family:var(--serif); font-weight:500; line-height:1.12; color:var(--ink);
}
.ts-v2 .w-left .ts-v2-rich h1,
.ts-v2 .w-left .ts-v2-rich h2{ font-size:48px; letter-spacing:-.4px; }
.ts-v2 .w-left .ts-v2-rich h3{ font-size:28px; }
.ts-v2 .w-left .ts-v2-rich p{ margin:0; max-width:560px; font-size:17px; line-height:1.6; color:var(--body); }
.ts-v2 .w-left .ts-v2-rich ul,
.ts-v2 .w-left .ts-v2-rich ol{ margin:0; padding-left:22px; font-size:17px; line-height:1.6; color:var(--body); }
.ts-v2 .w-left .ts-v2-rich li{ margin-bottom:6px; }
.ts-v2 .w-left .ts-v2-rich a{ color:var(--accent-dark); }

/* The mockup shows the "watch the video first" line with an eye icon and a
   little more weight. That sentence is the client's own copy, written in
   their editor and usually coloured red inline, so rather than adding a
   second line of our own we give theirs the mockup's treatment. The icon is
   a mask tinted with currentColor, so it always matches whatever colour the
   simulation author chose. */
.ts-v2 .w-left .ts-v2-rich p[style*="red"],
.ts-v2 .w-left .ts-v2-rich p[style*="Red"],
.ts-v2 .w-left .ts-v2-rich p.red{
  display:flex; align-items:flex-start; gap:10px; font-weight:600; font-size:16px;
}
.ts-v2 .w-left .ts-v2-rich p[style*="red"]::before,
.ts-v2 .w-left .ts-v2-rich p[style*="Red"]::before,
.ts-v2 .w-left .ts-v2-rich p.red::before{
  content:""; flex-shrink:0; width:19px; height:19px; margin-top:3px;
  background-color:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>') no-repeat center/contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>') no-repeat center/contain;
}
.ts-v2 .warnline{ margin:0; display:flex; gap:8px; align-items:center; font-size:14px; color:var(--amber); }
.ts-v2 .video{ position:relative; border-radius:18px; overflow:hidden; background:#1B2733; display:flex; align-items:center; justify-content:center; max-width:100%; }
/* Simulations upload video at whatever ratio they have, so letterbox
   against the dark frame rather than cropping the presenter. */
.ts-v2 .video iframe,.ts-v2 .video video{ width:100%; height:100%; border:0; display:block; object-fit:contain; background:#1B2733; }

/* The mockup is a fixed 1360px frame, so its 660px and 560px video sizes are
   really proportions of that width, not absolutes. Pinning them as pixels
   made the video shrink into the corner of a 1080p screen. These keep the
   mockup's proportions at any width, with a ceiling so it does not become
   the whole page on an ultrawide monitor. */
.ts-v2 .video-welcome{ width:100%; max-width:660px; aspect-ratio:16/9; }
.ts-v2 .video-brief{ flex:0 1 46%; min-width:380px; max-width:760px; aspect-ratio:16/9; align-self:flex-start; }
.ts-v2 .chips{ display:flex; gap:10px; flex-wrap:wrap; }
.ts-v2 .chip{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:10px; background:#fff; border:1px solid var(--line); font-size:13px; color:var(--body); }
.ts-v2 .w-card{ width:440px; flex-shrink:0; padding:28px; border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:0 12px 40px rgba(22,32,46,.07); display:flex; flex-direction:column; gap:18px; }
.ts-v2 .w-card h2{ margin:0; font-family:var(--serif); font-size:28px; font-weight:500; }
.ts-v2 .steps{ margin:10px 0 0; padding:0; list-style:none; display:flex; gap:14px; }
.ts-v2 .steps li{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.ts-v2 .steps li span{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#EEEBE4; color:var(--body); font-size:12px; font-weight:600; }
.ts-v2 .steps li.on{ color:var(--ink); font-weight:600; }
.ts-v2 .steps li.on span{ background:var(--accent); color:#fff; }
.ts-v2 .badge{ border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.ts-v2 .badge-head{ height:44px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:var(--accent); color:#fff; font-size:11px; font-weight:600; letter-spacing:1.4px; }
.ts-v2 .badge-head i{ width:38px; height:8px; border-radius:4px; background:rgba(255,255,255,.35); }
.ts-v2 .badge-body{ padding:18px; display:flex; align-items:center; gap:16px; }
.ts-v2 .badge-body .av{ width:60px; height:60px; font-size:20px; }
.ts-v2 .badge-body .nm{ font-family:var(--serif); font-size:22px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-v2 .badge-body .nm.empty{ color:#8A93A0; }
.ts-v2 .badge-body .org{ font-size:13px; color:var(--muted); }
.ts-v2 .badge-body .role{ font-size:12px; font-weight:600; color:var(--accent-dark); margin-top:2px; }
.ts-v2 .field{ display:flex; flex-direction:column; gap:6px; }
.ts-v2 .field label{ font-size:13px; font-weight:600; }
.ts-v2 .field input,.ts-v2 .field select,.ts-v2 .field textarea{ height:44px; padding:0 13px; border-radius:10px; border:1px solid var(--field); background:var(--fill); font-size:15px; width:100%; }
.ts-v2 .field textarea{ height:auto; padding:12px 13px; line-height:1.55; resize:none; }
.ts-v2 .start{ height:52px; border-radius:12px; border:none; background:var(--ink); color:#fff; font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; }
.ts-v2 .start:disabled{ background:#E6E2D9; color:var(--muted); cursor:not-allowed; }
.ts-v2 .hint{ font-size:12px; color:var(--muted); text-align:center; margin-top:8px; }
.ts-v2 .fine{ margin:0; display:flex; gap:8px; font-size:12px; line-height:1.5; color:var(--muted); }

/* ---------- briefing ---------- */
.ts-v2 .kicker{ font-size:13px; font-weight:600; color:var(--accent-dark); }
.ts-v2 .brief-row{ display:flex; gap:28px; align-items:stretch; flex-wrap:wrap; }
/* flex-basis:0 matters here. With the default `auto` the card's base size is
   its content width, and the instruction text is long prose whose max-content
   width is far wider than the row - so it wrapped below the video even on a
   wide screen. Basis 0 lets it simply take the space the video leaves. */
.ts-v2 .brief-text{ padding:24px 28px; flex:1 1 0; min-width:340px; max-height:520px; overflow:auto; }
.ts-v2 .brief-text p{ margin:0 0 14px; font-size:15px; line-height:1.68; color:#2A3441; }
.ts-v2 .brief-text ul,.ts-v2 .brief-text ol{ margin:0 0 14px; padding-left:22px; font-size:15px; line-height:1.68; color:#2A3441; }
.ts-v2 .brief-text li{ margin-bottom:6px; }
.ts-v2 .brief-text .red,.ts-v2 .brief-text [style*="color: red"]{ color:var(--red) !important; }
.ts-v2 .facts{ display:flex; gap:14px; flex-wrap:wrap; }
.ts-v2 .fact{ flex:1; min-width:150px; padding:16px 20px; }
.ts-v2 .fact b{ display:block; font-family:var(--serif); font-size:28px; font-weight:500; }
.ts-v2 .fact span{ font-size:13px; color:var(--muted); }
.ts-v2 .go{ width:250px; flex-shrink:0; border-radius:14px; border:none; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 22px; font-size:16px; font-weight:600; min-height:64px; }

/* ---------- inbox ---------- */
.ts-v2 .list{ width:360px; flex-shrink:0; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--line); }
.ts-v2 .list-head{ padding:20px 18px 12px; display:flex; flex-direction:column; gap:12px; }
.ts-v2 .list-head h1{ margin:0; font-family:var(--serif); font-size:28px; font-weight:500; }
.ts-v2 .search{ position:relative; }
.ts-v2 .search .ic{ position:absolute; left:12px; top:11px; color:var(--muted); }
.ts-v2 .search input{ width:100%; height:40px; padding:0 12px 0 40px; border:1px solid var(--field); border-radius:10px; background:var(--fill); font-size:14px; }
.ts-v2 .filters{ display:flex; gap:6px; flex-wrap:wrap; }
.ts-v2 .filters button{ height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--field); background:#fff; color:var(--body); font-size:13px; font-weight:500; }
.ts-v2 .filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.ts-v2 .msgs{ flex-grow:1; min-height:0; overflow:auto; }
.ts-v2 .msg{ position:relative; border-top:1px solid var(--line2); background:#fff; }
.ts-v2 .msg.sel{ background:var(--accent-soft); }
.ts-v2 .msg-main{ width:100%; text-align:left; border:none; background:transparent; padding:13px 52px 13px 16px; display:flex; gap:12px; align-items:flex-start; }
.ts-v2 .dot{ width:8px; height:8px; border-radius:50%; margin-top:7px; flex-shrink:0; background:transparent; }
.ts-v2 .msg.unread .dot{ background:var(--accent); }
.ts-v2 .msg-main .col{ display:flex; flex-direction:column; gap:3px; min-width:0; flex-grow:1; }
.ts-v2 .msg-main .r1{ display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.ts-v2 .msg-main .r1 small{ font-size:12px; color:var(--muted); white-space:nowrap; }
.ts-v2 .msg-main .subj{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-v2 .msg-main .prev{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-v2 .msg.unread .msg-main .r1 .nm{ font-weight:600; }
.ts-v2 .msg.unread .msg-main .subj{ font-weight:600; }
.ts-v2 .prio{ align-self:flex-start; margin-top:4px; font-size:11px; font-weight:600; color:var(--red); background:var(--red-soft); padding:3px 8px; border-radius:6px; }
.ts-v2 .star{ position:absolute; right:6px; top:6px; width:44px; height:44px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; color:#8A93A0; }
.ts-v2 .star[aria-pressed="true"]{ color:#C27A07; }
.ts-v2 .empty{ padding:44px 28px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; color:var(--muted); font-size:14px; line-height:1.5; }

.ts-v2 .reader{ flex-grow:1; min-width:0; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--line); }
.ts-v2 .reader-head{ padding:24px 30px 18px; border-bottom:1px solid var(--line2); display:flex; flex-direction:column; gap:12px; }
.ts-v2 .reader-head h2{ margin:0; font-family:var(--serif); font-size:26px; line-height:1.22; font-weight:500; }
.ts-v2 .from{ display:flex; align-items:center; gap:12px; }
.ts-v2 .from .av{ width:40px; height:40px; font-size:14px; }
.ts-v2 .from b{ font-size:14px; }
.ts-v2 .from b span{ font-weight:400; color:var(--muted); }
.ts-v2 .from small{ display:block; font-size:13px; color:var(--muted); }
/* One scroll region for the message, its replies and the compose form, so a
   long reply never pushes its own Send button out of reach. */
.ts-v2 .reader-scroll{ flex:1 1 auto; min-height:0; overflow:auto; }
.ts-v2 .reader-body{ padding:22px 30px; }
.ts-v2 .reader-body p{ margin:0 0 14px; font-size:15px; line-height:1.68; color:#2A3441; }
.ts-v2 .reader-body ul,.ts-v2 .reader-body ol{ font-size:15px; line-height:1.68; color:#2A3441; }
/* Its own row under the message, never trailing the last sentence. */
.ts-v2 .attachments{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line2); clear:both; }
.ts-v2 .attach{ display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; text-align:left; }
.ts-v2 .attach:hover{ border-color:var(--accent-mid); background:var(--fill); }
.ts-v2 .attach .label{ display:flex; flex-direction:column; gap:2px; }
.ts-v2 .attach .thumb{ width:64px; height:48px; border-radius:8px; background:#E4E8EA; display:flex; align-items:center; justify-content:center; color:var(--body); overflow:hidden; }
.ts-v2 .attach .thumb img{ width:100%; height:100%; object-fit:cover; }
.ts-v2 .attach b{ display:block; font-size:14px; text-align:left; }
.ts-v2 .attach small{ font-size:12px; color:var(--muted); }
.ts-v2 .reader-actions{ padding:14px 30px; border-top:1px solid var(--line2); display:flex; gap:10px; flex-wrap:wrap; position:sticky; bottom:0; background:#fff; z-index:2; }

/* attachment lightbox */
.ts-v2 .lightbox{ position:absolute; inset:0; z-index:40; background:rgba(12,18,26,.82); display:flex; align-items:center; justify-content:center; padding:40px; }
.ts-v2 .lightbox img{ max-width:100%; max-height:100%; border-radius:8px; background:#fff; }
.ts-v2 .lightbox .x{ position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%; border:none; background:#fff; display:flex; align-items:center; justify-content:center; }

/* ---------- compose ---------- */
.ts-v2 .compose{ border-top:1px solid var(--line2); padding:18px 30px; display:flex; flex-direction:column; gap:12px; background:var(--fill); }
.ts-v2 .compose h3{ margin:0; font-size:15px; font-weight:600; }
.ts-v2 .chipbox{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:44px; padding:6px 8px; border:1px solid var(--field); border-radius:10px; background:#fff; }
.ts-v2 .rchip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 6px 0 10px; border-radius:14px; background:var(--accent-soft); color:var(--accent-dark); font-size:13px; font-weight:500; }
.ts-v2 .rchip button{ width:20px; height:20px; border:none; background:transparent; color:var(--accent-dark); display:flex; align-items:center; justify-content:center; padding:0; border-radius:50%; }
.ts-v2 .rchip button:hover{ background:rgba(31,84,97,.14); }
.ts-v2 .chipbox select{ height:30px; border:none; background:transparent; font-size:13px; color:var(--muted); flex-grow:1; min-width:120px; padding:0 4px; }
.ts-v2 .compose textarea{ min-height:150px; padding:12px 13px; border-radius:10px; border:1px solid var(--field); background:#fff; font-size:14px; line-height:1.6; resize:vertical; }
.ts-v2 .compose-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ts-v2 .compose-note{ font-size:12px; color:var(--red); }

/* sent + draft replies shown under an email */
.ts-v2 .replies{ padding:0 30px 18px; display:flex; flex-direction:column; gap:10px; }
.ts-v2 .reply-item{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--fill); }
.ts-v2 .reply-item .rh{ display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:6px; }
.ts-v2 .reply-item .tagx{ font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; }
.ts-v2 .reply-item .tagx.sent{ background:var(--green-soft); color:var(--green); }
.ts-v2 .reply-item .tagx.draft{ background:var(--amber-soft); color:var(--amber); }
.ts-v2 .reply-item .meta{ font-size:12px; color:var(--muted); }
.ts-v2 .reply-item .bodytext{ font-size:14px; line-height:1.6; color:var(--body); white-space:pre-wrap; margin-top:6px; }

/* ---------- notes ---------- */
.ts-v2 .notes{ width:300px; flex-shrink:0; display:flex; flex-direction:column; background:var(--fill); }
.ts-v2 .notes-head{ padding:22px 20px 10px; }
.ts-v2 .notes-head label{ font-family:var(--serif); font-size:22px; font-weight:500; }
.ts-v2 .notes-head p{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
.ts-v2 .notes .wrap{ flex-grow:1; min-height:0; margin:0 20px; display:flex; flex-direction:column; }
.ts-v2 .notes textarea{ flex-grow:1; padding:14px; border:1px solid var(--field); border-radius:12px; background:#fff; font-size:14px; line-height:1.6; resize:none; }

/* TinyMCE replaces the textarea, so the editor shell has to take over the
   same space and match the surrounding fields rather than keeping its own
   default chrome. */
.ts-v2 .notes .wrap .tox-tinymce{
  flex:1 1 auto; min-height:0; width:100%;
  border:1px solid var(--field) !important; border-radius:12px !important;
  background:#fff;
}
.ts-v2 .notes .wrap .tox .tox-editor-header{ box-shadow:none !important; border-bottom:1px solid var(--line2) !important; padding:4px 2px !important; }
.ts-v2 .notes .wrap .tox .tox-toolbar__primary{ background:transparent !important; }
.ts-v2 .notes .wrap .tox .tox-tbtn{ height:30px; margin:1px; }
.ts-v2 .notes .wrap .tox .tox-tbtn svg{ fill:var(--body); }
.ts-v2 .notes .wrap .tox .tox-tbtn--enabled svg,
.ts-v2 .notes .wrap .tox .tox-tbtn:hover svg{ fill:var(--accent-dark); }
.ts-v2 .notes .wrap .tox .tox-sidebar-wrap{ min-height:0; }
.ts-v2 .autosave{ padding:12px 20px 18px; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--green); }

/* ---------- calendar ---------- */
.ts-v2 .cal-side{ width:300px; flex-shrink:0; padding:24px 20px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:18px; overflow:auto; }
.ts-v2 .cal-side h1{ margin:0; font-family:var(--serif); font-size:28px; font-weight:500; }
.ts-v2 .mini{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.ts-v2 .mini .dow{ font-size:11px; font-weight:600; color:var(--muted); text-align:center; padding-bottom:4px; }
.ts-v2 .mini button{ position:relative; height:34px; border-radius:8px; border:1px solid transparent; background:transparent; font-size:13px; }
.ts-v2 .mini button:hover{ background:var(--paper); }
.ts-v2 .mini button.first{ background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.ts-v2 .mini button[aria-pressed="true"]{ border-color:var(--accent); background:#fff; font-weight:600; }
.ts-v2 .mini button i{ position:absolute; left:50%; bottom:4px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--accent); }
.ts-v2 .legend{ display:flex; gap:14px; font-size:12px; color:var(--body); flex-wrap:wrap; }
.ts-v2 .legend span{ display:flex; align-items:center; gap:6px; }
.ts-v2 .legend i{ width:10px; height:10px; border-radius:3px; }
.ts-v2 .ev-list{ display:flex; flex-direction:column; gap:8px; }
.ts-v2 .ev-list button{ text-align:left; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--fill); }
.ts-v2 .ev-list b{ display:block; font-size:12px; color:var(--accent-dark); }
.ts-v2 .ev-list span{ font-size:13px; line-height:1.4; color:var(--body); }
.ts-v2 .dayview{ flex-grow:1; min-width:0; display:flex; flex-direction:column; padding:22px 32px 20px; gap:14px; }
.ts-v2 .day-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ts-v2 .day-head h2{ margin:0; font-family:var(--serif); font-size:30px; font-weight:500; }
.ts-v2 .day-head small{ font-size:13px; color:var(--muted); }
.ts-v2 .daynote{ flex-shrink:0; }
.ts-v2 .daynote textarea{ width:100%; min-height:72px; padding:12px 13px; border-radius:10px; border:1px solid var(--field); background:#fff; font-size:14px; line-height:1.55; resize:vertical; }

/* ---------- org chart ---------- */
.ts-v2 .zoom{ display:flex; align-items:center; gap:6px; }
.ts-v2 .zoom button{ height:34px; min-width:34px; padding:0 10px; border-radius:9px; border:1px solid var(--field); background:#fff; font-size:15px; font-weight:600; }
.ts-v2 .zoom span{ font-size:13px; color:var(--muted); min-width:48px; text-align:center; }
.ts-v2 .imgview{ flex-grow:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.ts-v2 .imgcanvas{ flex-grow:1; min-height:0; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:24px; background:var(--fill); }
.ts-v2 .imgcanvas img{ transform-origin:top center; max-width:none; display:block; }
.ts-v2 .imgcap{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.ts-v2 .imgnav{ display:flex; gap:8px; align-items:center; margin-left:auto; }
.ts-v2 .imgnav button{ height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--field); background:#fff; font-size:13px; }

/* ---------- submitted ---------- */
.ts-v2 .done{ flex-grow:1; display:flex; align-items:center; justify-content:center; padding:40px; overflow:auto; }
.ts-v2 .done-in{ width:640px; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.ts-v2 .done-in h1{ margin:0; font-family:var(--serif); font-size:46px; line-height:1.1; font-weight:500; }
.ts-v2 .done-in p{ margin:0; max-width:520px; font-size:16px; line-height:1.6; color:var(--body); }
.ts-v2 .ring{ width:76px; height:76px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; }

/* ---------- narrower screens ---------- */
@media (max-width:1180px){
  .ts-v2 .notes{ width:260px; }
  .ts-v2 .list{ width:300px; }
  .ts-v2 .w-main{ padding:8px 32px 32px; gap:32px; flex-wrap:wrap; }
  .ts-v2 .w-top{ padding:0 32px; }
}
@media (max-width:960px){
  .ts-v2 .rail{ width:64px; padding:12px 8px; }
  .ts-v2 .rail nav button span:not(.count){ display:none; }
  .ts-v2 .rail .saved{ display:none; }
  .ts-v2 .notes{ display:none; }
  .ts-v2 .w-card{ width:100%; }
}

/* ---------- calendar: hourly slots ---------- */
.ts-v2 .hours{ flex-grow:1; min-height:0; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:auto; }
.ts-v2 .hour{ display:flex; min-height:52px; border-top:1px solid var(--line2); }
.ts-v2 .hour:first-child{ border-top:none; }
.ts-v2 .hour .t{ width:92px; white-space:nowrap; flex-shrink:0; padding:10px 14px 0; font-size:12px; font-weight:500; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
.ts-v2 .hour .slot{ flex-grow:1; min-width:0; padding:6px 10px 6px 0; display:flex; align-items:center; }
/* The "add" affordance stays invisible until the row is hovered or focused,
   so a mostly empty day reads as a calm column rather than a wall of buttons. */
.ts-v2 .hour .add{ width:100%; height:40px; border-radius:9px; border:1px dashed transparent; background:transparent; color:transparent; font-size:13px; text-align:left; padding:0 12px; }
.ts-v2 .hour:hover .add,.ts-v2 .hour .add:focus-visible{ border-color:var(--field); color:var(--muted); }
.ts-v2 .event{ width:100%; min-height:40px; border-radius:9px; background:var(--accent-soft); border:1px solid var(--accent-mid); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 4px 4px 4px; }
.ts-v2 .event .ev-text{ flex-grow:1; min-width:0; text-align:left; border:none; background:transparent; padding:6px 10px; font-size:14px; font-weight:500; color:var(--accent-dark); border-radius:7px; }
.ts-v2 .event .ev-text:hover{ background:rgba(255,255,255,.6); }
.ts-v2 .event button:not(.ev-text){ width:32px; height:32px; flex-shrink:0; border-radius:8px; border:none; background:transparent; color:var(--accent-dark); display:flex; align-items:center; justify-content:center; }
.ts-v2 .event button:not(.ev-text):hover{ background:rgba(255,255,255,.7); }
.ts-v2 .adding{ width:100%; display:flex; gap:8px; }
.ts-v2 .adding input{ flex-grow:1; min-width:0; height:40px; padding:0 12px; border-radius:9px; border:1px solid var(--accent); background:#fff; font-size:14px; }
.ts-v2 .adding button{ height:40px; padding:0 14px; border-radius:9px; font-size:13px; font-weight:600; flex-shrink:0; }
.ts-v2 .dayview .daynote{ flex-shrink:0; margin-top:4px; }

/* ---------- compose: rich text ---------- */
.ts-v2 .compose .tox-tinymce{
  border:1px solid var(--field) !important; border-radius:10px !important; background:#fff;
}
.ts-v2 .compose .tox .tox-editor-header{ box-shadow:none !important; border-bottom:1px solid var(--line2) !important; padding:2px !important; }
.ts-v2 .compose .tox .tox-toolbar__primary{ background:transparent !important; }
.ts-v2 .compose .tox .tox-tbtn{ height:28px; margin:1px; }
.ts-v2 .compose .tox .tox-tbtn svg{ fill:var(--body); }
.ts-v2 .compose .tox .tox-tbtn--enabled svg,
.ts-v2 .compose .tox .tox-tbtn:hover svg{ fill:var(--accent-dark); }
/* The compose form sits inside the scroll region, so it must not try to be
   taller than it needs - it scrolls with the message above it. */
.ts-v2 .compose{ border-top:1px solid var(--line2); border-bottom:none; }
.ts-v2 .compose textarea{ min-height:120px; }
.ts-v2 .reply-item .bodytext{ white-space:normal; }
.ts-v2 .reply-item .bodytext p{ margin:0 0 8px; }
.ts-v2 .reply-item .bodytext ul,.ts-v2 .reply-item .bodytext ol{ margin:0 0 8px; padding-left:20px; }

/* A paperclip on any message that carries an attachment, the way a normal
   mail client flags one in the list. */
.ts-v2 .msg-main .subj .clip{ display:inline-flex; vertical-align:-2px; margin-right:6px; color:var(--muted); }
.ts-v2 .msg.unread .msg-main .subj .clip{ color:var(--body); }

/* ---------- TinyMCE floating menus ----------
   Deliberately NOT scoped under .ts-v2. TinyMCE appends its menus, colour
   pickers and dialogs to a .tox-tinymce-aux container on <body>, outside our
   markup, and its skin caps that at z-index 1300. The simulation layer sits
   at 99999, so every dropdown opened underneath it: the colour and highlight
   pickers looked like they simply refused to open, and "Remove colour" with
   them. Lifting the container above the app is what makes them reachable. */
.tox.tox-tinymce-aux,
.tox-tinymce-aux{ z-index:100100 !important; }
/* The swatch grid reads as a colour picker rather than a plain menu. */
.tox .tox-swatches__row{ display:flex; }
.tox .tox-swatch{ width:26px; height:26px; }