/* StraitsWorks People employee portal (FS 5.4), lifted from the approved design
   docs/next/design/approved/hr-employee.html and scoped under .sw. Tokens come from
   sites/straitsworks/theme.css. Layout is the approved HTML's; change the approved
   page first. */
[data-site="straitsworks"][data-look="customer"] body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sw { color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.5; }
.sw * { box-sizing: border-box; }
.sw a { color: inherit; }
.sw button { font-family: inherit; }
.sw h1, .sw h2, .sw h3, .sw h4 { margin: 0; }
.sw .bubble p { margin: 0 0 8px; }
.sw .bubble p:last-child { margin-bottom: 0; }
.sw .aimeta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.sw .aimeta .live { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--teal); }
.sw .aimeta .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.sw .aimeta .floor { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--muted); }
.sw .aimeta .floor::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b8c2bf; }
.sw .raw { background: #fcfbf8; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: 11.5px/1.55 var(--mono); color: var(--grey); white-space: pre-wrap; margin-top: 6px; max-width: 740px; }
.sw .outcome { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 26px 30px; max-width: 820px; }
.sw .outcome h1 { font-size: 24px; font-weight: 600; margin: 6px 0 12px; }
.sw .outcome .state { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: var(--teal-soft); color: var(--teal); }
.sw .outcome .state.floor { background: var(--grey-soft); color: var(--grey); }
.sw .outcome .reply { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; border-left: 3px solid var(--teal); padding: 4px 0 4px 16px; margin: 14px 0; }
.sw .outcome .totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 13.5px; max-width: 360px; margin: 10px 0; }
.sw .outcome .totals b { text-align: right; }
.sw .outcome .sign { font-size: 13px; color: var(--muted); margin-top: 8px; }
.sw .outcome .actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sw .honesty { max-width: 1376px; margin: 0 auto; padding: 18px 32px 36px; }
.sw header.top{background:var(--paper);border-bottom:1px solid var(--line)}
.sw .top-in{max-width:1376px;margin:0 auto;height:66px;display:flex;align-items:center;gap:40px;padding:0 32px}
.sw .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.sw .brand .name{font-family:var(--serif);font-size:21px;color:var(--teal-d);letter-spacing:.005em;line-height:1.1}
.sw .brand .name span{color:var(--champ-d)}
.sw .brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:1px}
.sw nav.main{display:flex;gap:2px;align-self:stretch}
.sw nav.main a{text-decoration:none;color:var(--muted);font-weight:500;padding:0 14px;display:flex;align-items:center}
.sw nav.main a.on{color:var(--teal);font-weight:600;box-shadow:inset 0 -2px 0 var(--teal)}
.sw .top-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.sw .search{width:250px;height:38px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);font-size:13px}
.sw .icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);position:relative}
.sw .icon-btn i{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--champ)}
.sw .me{display:flex;align-items:center;gap:10px}
.sw .avatar{width:38px;height:38px;border-radius:50%;background:var(--champ-soft);color:var(--champ-d);border:1px solid var(--champ-line);display:grid;place-items:center;font-weight:600;font-size:13px;letter-spacing:.03em}
.sw .me b{display:block;font-size:13.5px;line-height:1.2;font-weight:600}
.sw .me span{font-size:12px;color:var(--muted)}
.sw main{max-width:1376px;margin:0 auto;padding:26px 32px 8px}
.sw .hello{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.sw .hello h1{font-weight:600;font-size:28px;letter-spacing:-.01em;line-height:1.2;margin:0 0 4px}
.sw .hello p{margin:0;color:var(--muted);font-size:14.5px}
.sw .quick{display:flex;gap:10px}
.sw .quick a{display:flex;align-items:center;gap:8px;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;font-weight:500;font-size:13px}
.sw .quick a svg{color:var(--teal)}
.sw .grid{display:grid;grid-template-columns:1fr 392px;gap:24px;align-items:start}
.sw .askhr{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 12px 30px -24px rgba(11,70,69,.45)}
.sw .ask-head{background:var(--teal-d);color:#fff;padding:16px 22px;display:flex;align-items:center;gap:14px}
.sw .ask-head .mark{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none}
.sw .ask-head h2{font-weight:600;font-size:20px;margin:0;line-height:1.2;letter-spacing:-.005em}
.sw .ask-head p{margin:1px 0 0;font-size:13px;color:#c4dcd8}
.sw .ask-head .status{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:#dcebe8;border:1px solid rgba(201,168,106,.45);padding:5px 12px;border-radius:20px}
.sw .ask-head .status i{width:6px;height:6px;border-radius:50%;background:var(--champ)}
.sw .convo{padding:22px 26px 12px;display:flex;flex-direction:column;gap:16px}
.sw .day{align-self:center;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.sw .msg{display:flex;gap:12px;animation:sw-rise .35s ease both}
@keyframes sw-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sw .msg .who{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:600}
.sw .msg.bot .who{background:var(--teal-soft);color:var(--teal)}
.sw .msg.me{flex-direction:row-reverse}
.sw .msg.me .who{background:var(--champ-soft);color:var(--champ-d);border:1px solid var(--champ-line)}
.sw .bubble{border-radius:14px;padding:12px 16px;font-size:14.5px;line-height:1.55}
.sw .msg.me .bubble{background:var(--teal);color:#fff;border-top-right-radius:4px;max-width:560px}
.sw .msg.bot .bubble{background:var(--paper);border:1px solid var(--line);border-top-left-radius:4px;max-width:740px}
.sw .meta{font-size:11.5px;color:var(--muted);margin-top:5px}
.sw .msg.me .meta{text-align:right}
.sw .typing .bubble{display:flex;gap:5px;padding:15px 16px}
.sw .typing .bubble i{width:7px;height:7px;border-radius:50%;background:#9fb3b0;animation:sw-blink 1s infinite}
.sw .typing .bubble i:nth-child(2){animation-delay:.15s}
.sw .typing .bubble i:nth-child(3){animation-delay:.3s}
@keyframes sw-blink{0%,100%{opacity:.3}50%{opacity:1}}
.sw .intro{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 6px 44px}
.sw .intro .tile{border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;background:#fcfbf8}
.sw .intro .tile b{display:block;font-weight:600;font-size:14px;margin:8px 0 2px}
.sw .intro .tile span{font-size:12.5px;color:var(--muted);line-height:1.4;display:block}
.sw .intro .handoff{grid-column:1/-1;display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);padding:2px 2px 4px}
.sw .intro.gone{display:none}
.sw .answer-intro{margin:0 0 12px}
.sw .parts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sw .part{border:1px solid var(--line);border-radius:var(--r);padding:14px 15px 12px;background:#fcfbf8;display:flex;flex-direction:column}
.sw .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;align-self:flex-start;margin-bottom:9px}
.sw .part.yes .tag{background:var(--ok-soft);color:var(--ok)}
.sw .part.no .tag{background:var(--grey-soft);color:var(--grey)}
.sw .part h4{margin:0 0 5px;font-size:15px;font-weight:600}
.sw .part p{margin:0 0 11px;font-size:13.5px;color:#3b4846;line-height:1.5;flex:1}
.sw .cite{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--teal);text-decoration:none;border-top:1px dashed var(--line);padding-top:9px}
.sw .cite b{font-weight:600}
.sw .cite span{color:var(--muted)}
.sw .cite.inline{display:inline-flex;border-top:0;margin-top:10px;background:var(--teal-soft);border-radius:6px;padding:4px 9px}
.sw .needs{margin-top:12px;display:flex;gap:11px;align-items:flex-start;background:var(--champ-soft);border:1px solid var(--champ-line);border-left:3px solid var(--champ);border-radius:var(--r);padding:12px 14px;font-size:13.5px}
.sw .needs svg{flex:none;margin-top:2px}
.sw .needs b{display:block;font-size:13.5px;font-weight:600}
.sw .choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sw .choice{border:1px solid var(--teal-line);background:var(--paper);color:var(--teal);border-radius:9px;padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s}
.sw .choice:hover{background:var(--teal-soft)}
.sw .choice.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.sw .choice.primary:hover{background:var(--teal-h)}
.sw .choices.done .choice{cursor:default;opacity:.4}
.sw .choices.done .choice.picked{opacity:1}
.sw .choices.done .choice.picked::after{content:"  \2713"}
.sw .case{display:flex;gap:16px;align-items:center;border:1px solid var(--teal-line);background:#f4f9f8;border-radius:var(--r);padding:14px 16px;margin-top:10px}
.sw .case .num{font-size:20px;font-weight:600;color:var(--teal);line-height:1.1;white-space:nowrap;letter-spacing:.01em}
.sw .case .lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sw .case .txt{flex:1;min-width:0}
.sw .case .txt b{white-space:nowrap;font-weight:600}
.sw .track{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.sw .track .st{display:flex;align-items:center;gap:6px}
.sw .track .st i{width:17px;height:17px;border-radius:50%;border:2px solid #bccbc8;display:grid;place-items:center}
.sw .track .st.done{color:var(--teal);font-weight:600}
.sw .track .st.done i{background:var(--teal);border-color:var(--teal)}
.sw .track .bar{width:20px;height:2px;background:#d6dfdc}
.sw .composer{padding:16px 26px 20px;border-top:1px solid var(--line2);background:#fcfbf8}
.sw .next{display:none;align-items:center;gap:14px;background:var(--teal-d);color:#fff;border-radius:12px;padding:14px 18px;margin-bottom:16px;text-decoration:none;animation:sw-rise .4s ease both}
.sw .next.show{display:flex}
.sw .next .ic{width:34px;height:34px;border-radius:50%;border:1px solid rgba(201,168,106,.6);display:grid;place-items:center;flex:none}
.sw .next small{display:block;color:#bcd6d2;font-size:12px}
.sw .next b{font-weight:600;font-size:15px}
.sw .next .go{margin-left:auto;background:#fff;color:var(--teal-d);font-weight:600;font-size:13.5px;border-radius:8px;padding:8px 14px;white-space:nowrap}
.sw .pick-lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.sw .pick-lab b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sw .pick-lab span{font-size:12px;color:var(--muted)}
.sw .featured{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--teal-line);background:var(--paper);border-radius:12px;padding:13px 16px;cursor:pointer;margin-bottom:10px;transition:border-color .15s, box-shadow .15s}
.sw .featured:hover{border-color:var(--teal);box-shadow:0 4px 14px -8px rgba(15,95,92,.4)}
.sw .featured .q{flex:1;font-size:14.5px;color:var(--ink);line-height:1.45}
.sw .featured .story{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--champ-d);background:var(--champ-soft);border:1px solid var(--champ-line);border-radius:20px;padding:2px 9px;white-space:nowrap}
.sw .featured .arrow{width:34px;height:34px;border-radius:9px;background:var(--teal);display:grid;place-items:center;flex:none}
.sw .chips{display:flex;flex-wrap:wrap;gap:8px}
.sw .chip{border:1px solid var(--line);background:var(--paper);color:var(--teal);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer}
.sw .chip:hover{border-color:var(--teal-line);background:var(--teal-soft)}
.sw .used{opacity:.42;pointer-events:none}
.sw .note{font-size:11.5px;color:var(--muted);margin-top:12px}
.sw .side{display:flex;flex-direction:column;gap:18px;position:sticky;top:16px}
.sw .card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.sw .card h3{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.sw .card h3 a{font-size:12px;letter-spacing:0;text-transform:none;color:var(--teal);text-decoration:none;font-weight:500}
.sw .leave-big{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.sw .leave-big b{font-weight:600;font-size:34px;line-height:1;color:var(--teal)}
.sw .leave-big span{color:var(--muted)}
.sw .lrow{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:8px 0;border-top:1px solid var(--line2);font-size:13.5px}
.sw .lrow .meter{grid-column:1/-1;height:5px;background:var(--line2);border-radius:4px;overflow:hidden}
.sw .lrow .meter i{display:block;height:100%;background:var(--teal);border-radius:4px}
.sw .lrow.fc .meter i{background:var(--champ)}
.sw .lrow em{font-style:normal;color:var(--muted)}
.sw .empty{font-size:13px;color:var(--muted);padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r)}
.sw .req{border:1px solid var(--teal-line);background:#f4f9f8;border-radius:var(--r);padding:12px 14px;animation:sw-rise .4s ease both}
.sw .req .r1{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.sw .req .id{font-weight:600;color:var(--teal);font-size:13.5px}
.sw .pill{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--champ-soft);color:var(--champ-d);border:1px solid var(--champ-line)}
.sw .pill.ok{background:var(--ok-soft);color:var(--ok);border-color:#cfe5d7}
.sw .req p{margin:0 0 6px;font-size:13.5px}
.sw .req small{color:var(--muted);font-size:12px;display:block}
.sw .req-old{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:11px 2px 0;color:var(--muted)}
.sw .req-old b{color:var(--ink);font-weight:500}
.sw .twin{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sw .hol .date{width:50px;border-radius:8px;overflow:hidden;border:1px solid var(--line);text-align:center;margin-bottom:10px}
.sw .hol .date span{display:block;background:var(--teal);color:#fff;font-size:10px;letter-spacing:.1em;padding:2px 0;font-weight:600}
.sw .hol .date b{display:block;font-weight:600;font-size:21px;padding:4px 0 5px}
.sw .hol p, .sw .pay p{margin:0;font-size:13.5px;line-height:1.4}
.sw .hol small, .sw .pay small{color:var(--muted);font-size:12px}
.sw .pay .doc{width:40px;height:48px;border:1.5px solid var(--teal);border-radius:6px;margin-bottom:10px;display:grid;place-items:center;background:#fff}
.sw .pay a{display:inline-block;margin-top:8px;color:var(--teal);font-weight:600;font-size:13px;text-decoration:none}
.sw .left{display:flex;flex-direction:column;gap:18px;min-width:0}
.sw .care{display:grid;grid-template-columns:150px 1fr;gap:6px 22px;align-items:center;padding:18px 22px}
.sw .care h3{color:var(--ink);text-transform:none;letter-spacing:-.005em;font-size:17px;font-weight:600;margin:0}
.sw .care .lead{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.sw .care .links{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.sw .care .link{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r);color:var(--teal);background:#fcfbf8}
.sw .care .link b{display:block;color:var(--ink);font-weight:600;font-size:13.5px}
.sw .care .link small{color:var(--muted);font-size:12px;line-height:1.35;display:block}
.sw footer{max-width:1376px;margin:28px auto 0;padding:18px 32px 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:40px;font-size:11.5px;color:#8a938f;line-height:1.6}
.sw footer p{margin:0}
.sw footer .l{max-width:880px}

.sw .quick.ph { display: none; }

/* The phone's tab bar (round 26) is in the markup on every width; the laptop never sees it. */
.sw .ptabs { display: none; }

/* The tablet fold (768 to 1023 px), after the laptop rules it folds; an earlier copy
   sat above them and lost by order. */
@media (max-width: 1023px) { .sw .grid, .sw .intro, .sw .parts, .sw .twin, .sw .care { grid-template-columns: 1fr; } .sw nav.main, .sw .search { display: none; } }

/* ---- People Ops (FS 5.5), lifted from the approved design
   docs/next/design/approved/hr-agent.html and scoped under .sww. Tokens come
   from the workspace block of sites/straitsworks/theme.css. Layout is the
   approved HTML's; change the approved page first. ---- */
[data-site="straitsworks"][data-look="workspace"] body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sww { color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.sww *, .sww *:before, .sww *:after { box-sizing: border-box; }
.sww [hidden] { display: none !important; }
.sww .num { font-variant-numeric: tabular-nums; }
.sww button { font: inherit; cursor: pointer; }
.sww h1, .sww h2, .sww h3, .sww h4 { margin: 0; }
.sww a { color: inherit; }
.sww .card { padding: 0; }
.sww .error-line { margin: 10px 24px; }
.sww .signout { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 7px; padding: 4px 9px; font-size: 11.5px; margin-left: auto; }
.sww .st .live .ai-badge { font-size: 11px; }
.sww .st .live .fb { color: var(--warn, #82652c); font-weight: 600; }
.sww .st.halted .dot { background: var(--warn, #82652c); }
.sww .gcard textarea, .sww .gcard input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; margin: 6px 0; }
.sww .gcard .note { font-size: 12px; color: var(--muted, var(--ink-3)); margin-top: 6px; }
.sww .draft[contenteditable="true"] { outline: 2px solid var(--pri); }
.sww .draft-edit { width: 100%; min-height: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.5; }
.sww .policies { padding: 20px 24px 40px; max-width: 980px; }
.sww .policies .panel { margin-bottom: 14px; }
.sww .policies .clause.cited { background: var(--tint); }
.sww a{color:inherit}
.sww button{font-family:inherit;cursor:pointer}
.sww .app{display:grid;grid-template-columns:204px minmax(0,1fr);min-height:calc(100vh - 32px)}
.sww .sb{background:var(--teal-d);color:#cfe2df;display:flex;flex-direction:column;padding:20px 14px 18px}
.sww .sb .brand{display:flex;gap:10px;align-items:center;padding:0 6px 20px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px}
.sww .sb .brand b{font-family:var(--serif);font-weight:400;font-size:17px;color:#fff;display:block;line-height:1.15}
.sww .sb .brand small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#9fc4bf;white-space:nowrap}
.sww .sb nav a{display:flex;align-items:center;gap:11px;text-decoration:none;padding:9px 10px;border-radius:8px;color:#c6dcd8;font-weight:500;margin-bottom:2px}
.sww .sb nav a.on{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 2px 0 0 var(--champ)}
.sww .sb nav a .n{margin-left:auto;font-size:11px;color:var(--teal-d);background:var(--champ);border-radius:10px;padding:0 7px;font-weight:700}
.sww .sb .sec{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#86b2ac;margin:20px 10px 8px}
.sww .sb .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 8px 0;border-top:1px solid rgba(255,255,255,.1)}
.sww .sb .me .av{width:34px;height:34px;border-radius:50%;background:var(--champ-soft);color:var(--champ-d);display:grid;place-items:center;font-weight:700;font-size:12px}
.sww .sb .me b{display:block;color:#fff;font-size:13px;line-height:1.2}
.sww .sb .me span{font-size:11.5px;color:#9fc4bf}
.sww .work{padding:0 28px;min-width:0}
.sww .topbar{display:flex;align-items:center;gap:14px;height:62px}
.sww .topbar h1{font-weight:600;font-size:20px;margin:0;letter-spacing:-.005em}
.sww .topbar .today{margin-left:auto;display:flex;gap:18px;font-size:12.5px;color:var(--muted)}
.sww .topbar .today b{color:var(--ink);font-weight:600}
.sww .topbar .reset{font-size:12.5px;color:var(--teal);font-weight:600;text-decoration:none;border-left:1px solid var(--line);padding-left:16px}
.sww .qs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.sww .qc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;text-decoration:none;display:block}
.sww .qc.on{border-color:var(--teal);box-shadow:inset 0 3px 0 var(--teal)}
.sww .qc .r1{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.sww .qc .r1 b{color:var(--ink);font-weight:700}
.sww .qc .t{font-weight:600;font-size:13px;margin:2px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sww .qc .who{font-size:12px;color:var(--muted)}
.sww .stat{font-size:11px;font-weight:600;border-radius:20px;padding:1px 8px;white-space:nowrap}
.sww .stat.new{background:var(--teal-soft);color:var(--teal)}
.sww .stat.work{background:var(--teal-soft);color:var(--teal)}
.sww .stat.you{background:var(--champ-soft);color:var(--champ-d);border:1px solid var(--champ-line)}
.sww .stat.closed{background:var(--ok-soft);color:var(--ok)}
.sww .stat.sla{background:none;color:var(--muted);font-weight:500;padding:0}
.sww .case{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:start}
.sww .case .ids{font-size:12px;color:var(--muted);margin-bottom:3px}
.sww .case .ids b{color:var(--teal);font-weight:700}
.sww .case h2{font-size:21px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
.sww .emp{display:flex;align-items:center;gap:11px}
.sww .emp .av{width:36px;height:36px;border-radius:50%;background:var(--champ-soft);color:var(--champ-d);border:1px solid var(--champ-line);display:grid;place-items:center;font-weight:600;font-size:12px}
.sww .emp b{display:block;font-size:13.5px;line-height:1.2;font-weight:600}
.sww .emp span{font-size:12px;color:var(--muted)}
.sww .chip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--teal-soft);color:var(--teal);margin-left:6px}
.sww .chip.ex{background:var(--champ-soft);color:var(--champ-d);border:1px solid var(--champ-line)}
.sww .life{display:flex;align-items:center;gap:0;margin-top:4px}
.sww .life .s{display:flex;flex-direction:column;align-items:center;gap:5px;width:92px;font-size:11.5px;color:var(--faint);text-align:center;position:relative}
.sww .life .s i{width:14px;height:14px;border-radius:50%;border:2px solid #cfd8d5;background:var(--paper);z-index:1}
.sww .life .s::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;background:#e3e8e6}
.sww .life .s:first-child::before{display:none}
.sww .life .s.done{color:var(--teal)}
.sww .life .s.done i{background:var(--teal);border-color:var(--teal)}
.sww .life .s.done::before, .sww .life .s.now::before{background:var(--teal)}
.sww .life .s.now{color:var(--ink);font-weight:600}
.sww .life .s.now i{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.sww .life .s.wait i{border-color:var(--champ);background:var(--champ);box-shadow:0 0 0 4px var(--champ-soft)}
.sww .msgs{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.sww .quote{background:var(--soft);border:1px solid var(--line2);border-left:3px solid var(--teal-line);border-radius:0 8px 8px 0;padding:10px 14px;font-size:14px;line-height:1.5}
.sww .quote small{display:block;color:var(--muted);font-size:11.5px;margin-top:4px}
.sww .cols{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start}
.sww .panel{background:var(--paper);border:1px solid var(--line);border-radius:12px}
.sww .agent .ah{display:flex;gap:14px;align-items:flex-start;padding:18px 22px 16px;border-bottom:1px solid var(--line2)}
.sww .agent .ic{width:40px;height:40px;border-radius:10px;background:var(--teal-d);display:grid;place-items:center;flex:none}
.sww .agent h3{margin:0;font-size:16px;font-weight:600}
.sww .agent .desc{margin:2px 0 8px;color:var(--muted);font-size:13px;max-width:470px}
.sww .lane{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.sww .lane span{display:inline-flex;align-items:center;gap:6px}
.sww .lane i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.sww .lane b{color:var(--ink);font-weight:600}
.sww .start{margin-left:auto;flex:none;border:0;border-radius:9px;background:var(--teal);color:#fff;font-size:14px;font-weight:600;padding:11px 18px;display:inline-flex;gap:8px;align-items:center}
.sww .start:hover{background:var(--teal-h)}
.sww .start[hidden]{display:none}
.sww .runbar{display:none;align-items:center;gap:12px;padding:11px 22px;border-bottom:1px solid var(--line2);background:var(--soft);font-size:12.5px}
.sww .runbar.show{display:flex}
.sww .runbar .state{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--teal)}
.sww .runbar .state i{width:8px;height:8px;border-radius:50%;background:var(--teal);animation: sww-pulse 1.2s infinite}
.sww .runbar.paused .state{color:var(--champ-d)}
.sww .runbar.paused .state i{background:var(--champ);animation: sww-none}
.sww .runbar.done .state{color:var(--ok)}
.sww .runbar.done .state i{background:var(--ok);animation: sww-none}
@keyframes sww-pulse{50%{opacity:.35}}
.sww .runbar .calls{margin-left:auto;color:var(--muted)}
.sww .runbar .calls b{color:var(--ink);font-weight:600}
.sww .prog{height:3px;background:var(--line2)}
.sww .prog i{display:block;height:100%;width:0;background:var(--teal);transition:width .5s}
.sww .plan{padding:10px 22px 0;font-size:12px;color:var(--muted)}
.sww .feed{list-style:none;margin:0;padding:4px 22px 18px}
.sww .grp{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:16px 0 4px;display:flex;align-items:center;gap:10px}
.sww .grp::after{content:"";flex:1;height:1px;background:var(--line2)}
.sww .st{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line2)}
.sww .st:last-child{border-bottom:0}
.sww .st .dot{width:20px;height:20px;border-radius:50%;margin-top:1px;display:grid;place-items:center;border:1.5px solid #cdd6d3;background:var(--paper)}
.sww .st .t1{display:flex;align-items:center;gap:8px;min-height:22px}
.sww .st .t1 b{font-weight:600;font-size:13.5px}
.sww .st .t1 code{font-family:var(--mono);font-size:11px;color:var(--faint)}
.sww .st .t1 time{margin-left:auto;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.sww .bd{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:1px 6px;border:1px solid}
.sww .bd.ai{color:var(--teal);border-color:var(--teal-line);background:var(--teal-soft)}
.sww .bd.rule{color:var(--grey);border-color:#dde2e0;background:var(--grey-soft)}
.sww .bd.guard{color:#fff;border-color:var(--teal-d);background:var(--teal-d)}
.sww .bd.person{color:var(--champ-d);border-color:var(--champ-line);background:var(--champ-soft)}
.sww .st .res{font-size:13px;color:#3b4846;margin-top:2px}
.sww .st .res b{font-weight:600;color:var(--ink)}
.sww .st .live{font-size:11.5px;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sww .st .live .g{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.sww .st .live b{color:var(--ok);font-weight:600}
.sww .st .live a{color:var(--teal);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sww .st pre{margin:8px 0 0;background:#0f2524;color:#cfe5e1;font-family:var(--mono);font-size:11px;line-height:1.55;border-radius:8px;padding:10px 12px;white-space:pre-wrap}
.sww .st.pending{color:var(--faint)}
.sww .st.pending .t1 b{color:var(--faint);font-weight:500}
.sww .st.pending .bd{opacity:.55}
.sww .st.pending .res, .sww .st.pending .live{display:none}
.sww .st.run .dot{border:2px solid var(--teal);border-right-color:transparent;animation: sww-spin .8s linear infinite}
.sww .st.run .res{color:var(--teal);font-style:italic}
.sww .st.run .live{display:none}
@keyframes sww-spin{to{transform:rotate(360deg)}}
.sww .st.done .dot{background:var(--teal);border-color:var(--teal)}
.sww .st.done .dot::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.sww .st.gate.done .dot{background:var(--champ);border-color:var(--champ)}
.sww .st.wait .dot{background:var(--champ);border-color:var(--champ);box-shadow:0 0 0 4px var(--champ-soft)}
.sww .st.wait .t1 b{color:var(--champ-d)}
.sww .st.skip{color:var(--faint)}
.sww .st.skip .dot{border-style:dashed}
.sww .st.skip .t1 b{color:var(--faint);font-weight:500;text-decoration:line-through}
.sww .st.skip .live{display:none}
.sww .st.skip .res{color:var(--faint)}
.sww .st:not(.done):not(.run):not(.skip) .live{display:none}
.sww .st.fresh{animation: sww-rise .35s ease both}
@keyframes sww-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sww .gcard{margin-top:10px;border:1px solid var(--champ-line);border-left:3px solid var(--champ);background:var(--champ-soft);border-radius:var(--r);padding:14px 16px;animation: sww-rise .35s ease both}
.sww .gcard .k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--champ-d)}
.sww .gcard p{margin:5px 0 12px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.sww .gcard .opts{display:flex;flex-wrap:wrap;gap:8px}
.sww .btn{border:1px solid var(--teal-line);background:var(--paper);color:var(--teal);border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600}
.sww .btn:hover{background:var(--teal-soft)}
.sww .btn.pri{background:var(--teal);border-color:var(--teal);color:#fff}
.sww .btn.pri:hover{background:var(--teal-h)}
.sww .tot{display:flex;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;margin:0 0 12px;overflow:hidden}
.sww .tot div{flex:1;padding:8px 12px;border-right:1px solid var(--line2);font-size:12px;color:var(--muted)}
.sww .tot div:last-child{border-right:0}
.sww .tot b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.sww .gcard .needs{font-size:12.5px;color:var(--muted);margin:-4px 0 12px;display:flex;gap:7px;align-items:center}
.sww .donecard{margin:6px 22px 20px;border:1px solid var(--teal-line);background:#f3f9f8;border-radius:12px;padding:16px 18px;display:none;animation: sww-rise .4s ease both}
.sww .donecard.show{display:block}
.sww .donecard h4{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--teal-d);display:flex;align-items:center;gap:8px}
.sww .donecard ul{margin:0 0 14px;padding-left:18px;font-size:13.5px;line-height:1.6}
.sww .donecard .links{display:flex;gap:10px;flex-wrap:wrap}
.sww .donecard a{text-decoration:none}
.sww .file{display:flex;flex-direction:column;gap:16px}
.sww .fh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px}
.sww .fh h4{margin:0;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sww .fh span{font-size:11.5px;color:var(--muted)}
.sww .fh .cnt{color:var(--teal);background:var(--teal-soft);border-radius:10px;padding:0 8px;font-weight:600}
.sww .fb{padding:0 18px 16px}
.sww .empty{font-size:12.5px;color:var(--faint);border:1px dashed var(--line);border-radius:8px;padding:12px 14px}
.sww .clause{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin-bottom:8px;animation: sww-rise .35s ease both;background:var(--soft)}
.sww .clause:last-child{margin-bottom:0}
.sww .clause .ct{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:12.5px}
.sww .clause .ct b{color:var(--teal);font-weight:700}
.sww .clause .ct span{font-weight:600}
.sww .clause .ct a{margin-left:auto;font-size:11.5px;color:var(--teal);text-decoration:none;font-weight:600}
.sww .clause q{display:block;font-size:13px;line-height:1.5;color:#36433f;quotes:"\201C" "\201D"}
.sww .clause .use{font-size:11.5px;color:var(--muted);margin-top:5px}
.sww .clause.ex{border-color:var(--champ-line);background:#fdfaf3}
.sww .clause.ex .ct b{color:var(--champ-d)}
.sww .facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;animation: sww-rise .35s ease both}
.sww .facts div{padding:9px 12px;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2)}
.sww .facts div:nth-child(2n){border-right:0}
.sww .facts div:nth-last-child(-n+2){border-bottom:0}
.sww .facts small{display:block;font-size:11px;color:var(--muted)}
.sww .facts b{font-size:13.5px;font-weight:600}
.sww .facts .hl{background:var(--champ-soft)}
.sww .note{font-size:11.5px;color:var(--muted);margin-top:8px}
.sww .totals{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;animation: sww-rise .35s ease both}
.sww .totals .row{display:flex;justify-content:space-between;padding:3px 0;font-size:13px}
.sww .totals .row b{font-weight:600}
.sww .totals .row.sum{border-top:1px solid var(--line2);margin-top:4px;padding-top:7px;font-size:14px}
.sww .draft{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;font-size:13.5px;line-height:1.6;animation: sww-rise .35s ease both;outline:none}
.sww .draft:focus{border-color:var(--teal-line);box-shadow:0 0 0 3px var(--teal-soft)}
.sww .draft p{margin:0 0 8px}
.sww .draft p:last-child{margin:0}
.sww .draft .exp{background:var(--champ-soft);border-radius:4px;padding:1px 3px}
.sww .cites{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.sww .cites span{font-size:11px;color:var(--teal);background:var(--teal-soft);border-radius:6px;padding:2px 8px;font-weight:600}
.sww footer{margin:26px 0 0;padding:16px 0 28px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:28px;font-size:11.5px;color:#7f8986;line-height:1.55}
.sww footer p{margin:0}
.sww footer b{color:#4d5957;font-weight:600}

/* The People Ops desk's phone-only parts (round 26, hr-agent-phone.html) exist in the
   markup on every width; the laptop never sees them. */
.sww .sb .back, .sww .agent .ah .fn, .sww .foldbar, .sww .ptabs, .sww .shead, .sww .dots, .sww .stitle, .sww .replyview, .sww .qrs, .sww .dsum, .sww .after, .sww .dnav, .sww .replay-ph, .sww .bbar, .sww .scrim, .sww .opts .od { display: none; }

/* ---- The phone (round 26, hr-employee-phone.html): the header under the rail,
   the greeting, three tabs (Ask HR, My leave, Requests), the chat at its natural
   height with the questions below it. The breakpoint is PHONE_MAX_WIDTH in
   core/phone.js. ---- */
@media (max-width: 767px) {
  .sw header.top { position: sticky; top: 30px; z-index: 29; }
  .sw .top-in { height: 52px; gap: 10px; padding: 0 14px; }
  .sw .brand { gap: 9px; }
  .sw .brand svg { width: 30px; height: 30px; }
  .sw .brand .name { font-size: 17px; line-height: 1.05; }
  .sw .brand small { font-size: 8.5px; letter-spacing: .14em; }
  .sw nav.main, .sw .search, .sw .icon-btn { display: none; }
  .sw .top-right { gap: 0; }
  .sw .me { gap: 8px; }
  .sw .avatar { width: 30px; height: 30px; font-size: 11px; }
  .sw .me b { display: block; font-size: 12.5px; line-height: 1.2; }
  .sw .me span { font-size: 10.5px; }
  .sw main { padding: 0 0 8px; }
  .sw .hello { display: block; margin: 0; padding: 12px 14px 8px; }
  .sw .hello h1 { font-size: 22px; line-height: 1.2; }
  .sw .hello p { margin: 2px 0 0; font-size: 12.5px; }
  /* the three tabs (rule 2), sticky under the rail and the header */
  .sw .ptabs { position: sticky; top: 82px; z-index: 28; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .sw .ptabs button { padding: 11px 2px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; }
  .sw .ptabs button.on { color: var(--teal); border-bottom-color: var(--teal); }
  .sw .ptabs button em { display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 5px; border-radius: 9px; background: var(--champ); color: #fff; font-style: normal; font-size: 10px; line-height: 16px; }
  .sw [data-panel] { display: none; }
  .sw[data-tab="ask"] [data-panel="ask"], .sw[data-tab="leave"] [data-panel="leave"], .sw[data-tab="requests"] [data-panel="requests"] { display: block; }
  .sw .quick.lap { display: none; }
  .sw[data-tab="leave"] .quick.ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
  .sw .quick a { flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; font-size: 11.5px; text-align: center; }
  .sw .grid { display: block; padding: 12px 12px 0; }
  .sw .left, .sw .side { display: block; position: static; }
  .sw .card, .sw .askhr { margin-bottom: 12px; }
  /* Ask HR */
  .sw .askhr { border-radius: 14px; box-shadow: none; }
  .sw .ask-head { gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
  .sw .ask-head .mark { width: 36px; height: 36px; border-radius: 10px; }
  .sw .ask-head h2 { font-size: 17px; }
  .sw .ask-head p { font-size: 11.5px; }
  .sw .ask-head .status { width: 100%; margin: 0; font-size: 11px; }
  .sw .convo { gap: 12px; padding: 14px 12px 6px; }
  .sw .msg { gap: 8px; }
  .sw .msg .who { width: 28px; height: 28px; font-size: 10.5px; }
  .sw .msg > div:last-child { min-width: 0; max-width: calc(100% - 36px); }
  .sw .bubble { padding: 10px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; }
  .sw .meta { font-size: 11px; margin-top: 4px; }
  .sw .intro { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 0 36px; }
  .sw .intro .tile { padding: 10px 9px; }
  .sw .intro .tile b { margin-top: 6px; font-size: 12px; line-height: 1.25; }
  .sw .intro .tile span { display: none; }
  .sw .intro .handoff { font-size: 11.5px; gap: 7px; }
  .sw .parts { grid-template-columns: 1fr; gap: 8px; }
  .sw .part { padding: 11px 12px 10px; }
  .sw .part h4 { font-size: 14px; }
  .sw .part p { font-size: 12.5px; }
  .sw .cite { font-size: 11.5px; }
  .sw .needs { padding: 10px 11px; font-size: 12.5px; gap: 9px; }
  .sw .choices { flex-direction: column; gap: 6px; }
  .sw .choice { padding: 11px 12px; border-radius: 10px; font-size: 13.5px; text-align: left; }
  .sw .case { display: block; padding: 11px 12px; }
  .sw .case .num { font-size: 18px; }
  .sw .case .txt { margin-top: 4px; font-size: 12.5px; }
  .sw .track { margin: 9px 0 0; font-size: 11px; }
  .sw .composer { padding: 12px 12px 14px; }
  .sw .next { gap: 10px; padding: 12px 14px; margin-bottom: 12px; }
  .sw .next b { font-size: 13.5px; }
  .sw .next small { font-size: 11px; }
  .sw .pick-lab { margin-bottom: 8px; }
  .sw .pick-lab b, .sw .pick-lab span { font-size: 11px; }
  .sw .featured { gap: 10px; padding: 11px 12px; margin-bottom: 8px; border-radius: 12px; }
  .sw .featured .q { font-size: 13px; line-height: 1.4; }
  .sw .featured .story { display: none; }
  .sw .featured .arrow { width: 32px; height: 32px; border-radius: 9px; }
  .sw .chips { flex-direction: column; gap: 6px; }
  .sw .chip { padding: 9px 12px; border-radius: 10px; font-size: 13px; text-align: left; }
  .sw .note { margin-top: 10px; font-size: 11px; }
  .sw .aimeta { flex-wrap: wrap; font-size: 11px; }
  /* the cards: my leave, requests, support */
  .sw .card { padding: 12px 14px; border-radius: 12px; }
  .sw .card h3 { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .sw .leave-big { margin-bottom: 8px; }
  .sw .leave-big b { font-size: 34px; }
  .sw .leave-big span { font-size: 13px; }
  .sw .lrow { font-size: 13px; }
  .sw .twin { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sw .care { padding: 12px 14px; }
  .sw .care .ill { display: none; }
  .sw .care .links { display: block; }
  .sw .care .link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line2); text-decoration: none; }
  .sw .care .link b { display: block; font-size: 13.5px; }
  .sw .care .link small { display: block; color: var(--muted); font-size: 11.5px; }
  .sw .care h3 { padding: 0; }
  .sw .care .lead { font-size: 12.5px; margin: 4px 0 8px; }
  .sw .care .link { padding: 9px 0; }
  .sw .req { padding: 11px 12px; }
  .sw .req-old { font-size: 13px; }
  /* the request's outcome page */
  .sw .outcome { margin: 12px; padding: 18px 16px; border-radius: 12px; }
  .sw .outcome h1 { font-size: 22px; }
  .sw .outcome .actions .chip { padding: 9px 12px; font-size: 13px; }
  /* footer */
  .sw footer { display: block; margin: 12px 0 0; padding: 12px 14px 10px; font-size: 10.5px; line-height: 1.45; }
  .sw footer .l p { margin: 0 0 6px; }
  .sw .honesty { padding: 8px 14px 16px; font-size: 10.5px; }
  .sw .error-line { margin: 8px 0; }
}

/* ---- StraitsWorks People Ops on the phone (round 26, hr-agent-phone.html): the
   requests or the request, one column; the sidebar becomes the bar under the rail;
   the request with its lifeline scrolling sideways, the agent run, then the case
   file behind four tabs; the check, the decision and the sign-off as bottom sheets,
   the decision in three steps with the reply edited in the sheet; one result card
   when finished, the run and the file folded. The breakpoint is PHONE_MAX_WIDTH in
   core/phone.js. ---- */
@media (max-width: 767px) {
  .sww { font-size: 14px; }
  .sww .app { display: block; min-height: 0; }
  /* the sidebar becomes the bar under the rail */
  .sww .sb { position: sticky; top: 30px; z-index: 29; flex-direction: row; align-items: center; gap: 10px; height: 52px; padding: 0 14px; }
  .sww[data-view="case"] .sb .back, .sww:not([data-view]) .sb .back { display: block; color: #fff; text-decoration: none; font-size: 28px; line-height: 1; padding: 0 4px 3px 0; }
  .sww .sb .brand { gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .sww .sb .brand svg { flex: none; width: 30px; height: 30px; }
  .sww .sb .brand b { font-size: 16px; white-space: nowrap; }
  .sww .sb nav, .sww .sb .me > div, .sww .sb .signout { display: none; }
  .sww .sb .me { margin: 0 0 0 auto; padding: 0; border: 0; }
  .sww .sb .me .av { width: 30px; height: 30px; font-size: 11px; }
  /* one column: the requests or the request; every card as wide as the phone */
  .sww .work { display: flex; flex-direction: column; align-items: stretch; padding: 12px 12px 0; }
  .sww .cols, .sww .file { display: contents; }
  .sww[data-view="queue"] .case, .sww[data-view="queue"] .cols { display: none; }
  .sww[data-view="case"] .topbar, .sww[data-view="case"] .qs { display: none; }
  .sww .error-line { margin: 0 0 10px; }
  .sww .case { order: 1; }
  .sww .agent { order: 2; }
  .sww .foldbar { order: 3; }
  .sww .ptabs { order: 4; }
  .sww .file .panel { order: 5; margin: 0 0 12px; }
  .sww footer { order: 9; }
  /* the requests */
  .sww .topbar { flex-wrap: wrap; gap: 6px 14px; height: auto; padding: 2px 2px 12px; }
  .sww .topbar h1 { font-size: 19px; }
  .sww .topbar .today { flex-wrap: wrap; gap: 4px 14px; width: 100%; margin-left: 0; }
  .sww .topbar .reset { padding-left: 0; border-left: 0; }
  .sww .qs { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
  .sww .qc { padding: 12px 14px; }
  .sww .qc .t { white-space: normal; font-size: 14px; }
  /* the request */
  .sww .case { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0 0 12px; padding: 14px; }
  .sww .case > div:first-child { min-width: 0; }
  .sww .case .ids { overflow-wrap: anywhere; }
  .sww .case h2 { margin-bottom: 8px; font-size: 19px; }
  .sww .emp > div { min-width: 0; }
  .sww .chip { display: inline-block; margin: 3px 4px 0 0; }
  .sww .life { overflow-x: auto; margin: 0 -14px; padding: 4px 14px; scrollbar-width: none; }
  .sww .life::-webkit-scrollbar { display: none; }
  .sww .life .s { flex: none; width: 76px; font-size: 10.5px; }
  .sww .msgs { grid-template-columns: minmax(0, 1fr); }
  /* the agent run */
  .sww .agent { margin: 0 0 12px; }
  .sww .agent .ah { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .sww .agent .ic, .sww .agent .ah .btn[data-action="replay"], .sww .agent h3 code { display: none; }
  .sww .agent .ah > div { flex: 1 1 0; min-width: 0; }
  .sww .agent h3 { overflow-wrap: anywhere; }
  .sww .start { flex: 1 1 100%; justify-content: center; height: 48px; margin: 0; }
  .sww .runbar { flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; }
  .sww .runbar .calls { margin-left: 0; }
  .sww .plan { padding: 10px 14px 0; }
  .sww .feed { padding: 4px 14px 12px; }
  .sww .st .t1 { flex-wrap: wrap; gap: 2px 8px; }
  .sww .st .t1 b { flex: 1 1 100%; overflow-wrap: anywhere; }
  .sww .st .t1 code, .sww .st .res, .sww .st pre { overflow-wrap: anywhere; }
  .sww .agent .ah .fn { margin-left: auto; padding: 0; background: none; border: 0; color: var(--teal); font-size: 12px; font-weight: 600; }
  .sww .agent .ah .fn u { text-decoration: none; }
  .sww[data-idle] .agent .ah .fn, .sww[data-fin] .agent .ah .fn { display: inline; }
  .sww[data-idle]:not([data-runopen]) .feed { display: none; }
  /* finished: one result card, the run and the file folded */
  .sww[data-fin] .case .emp span, .sww[data-fin] .case .msgs, .sww[data-fin] .case .life, .sww[data-fin] .case .chip { display: none; }
  .sww[data-fin] .agent { display: contents; }
  .sww[data-fin] .runbar, .sww[data-fin] .prog, .sww[data-fin] .plan, .sww[data-fin] .agent .desc, .sww[data-fin] .agent .lane { display: none; }
  .sww[data-fin] .agent .ah { order: 3; margin: 0 0 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
  .sww[data-fin] .feed { order: 3; margin: 0 0 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
  .sww[data-fin]:not([data-runopen]) .feed { display: none; }
  .sww[data-fin] .donecard { order: 2; margin: 0 0 12px; padding: 18px 16px 14px; }
  .sww .donecard { margin: 6px 14px 14px; }
  .sww .donecard .links { flex-direction: column-reverse; gap: 8px; }
  .sww .donecard .links a { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
  .sww .replay-ph { display: block; width: 100%; margin-top: 10px; padding: 8px; background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; }
  .sww[data-fin] .foldbar { display: flex; order: 3; justify-content: space-between; align-items: center; width: 100%; margin: 0 0 12px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 600; text-align: left; }
  .sww .foldbar span { color: var(--teal); font-size: 12px; font-weight: 600; }
  /* the case file behind four tabs */
  .sww .ptabs { position: sticky; top: 82px; z-index: 20; display: flex; gap: 4px; margin: 0 0 12px; padding: 0 4px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .sww .ptabs button { flex: 1; margin-bottom: -1px; padding: 10px 2px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
  .sww .ptabs button.on { color: var(--teal); border-bottom-color: var(--teal); }
  .sww [data-panel] { display: none; }
  .sww[data-ptab="pol"] [data-panel="pol"], .sww[data-ptab="rec"] [data-panel="rec"], .sww[data-ptab="tot"] [data-panel="tot"], .sww[data-ptab="draft"] [data-panel="draft"] { display: block; }
  .sww[data-fin]:not([data-tabsopen]) .ptabs, .sww[data-fin]:not([data-tabsopen]) [data-panel] { display: none; }
  .sww .fh { padding: 12px 14px 8px; }
  .sww .fb { padding: 0 14px 14px; }
  .sww .clause .ct { flex-wrap: wrap; }
  .sww .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the bar that opens a waiting sheet; the sheets (rule 3) */
  .sww .bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
  .sww:not([data-sheet]) .bbar { display: block; }
  .sww .bbar button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; padding: 0 16px; background: var(--teal); border: 0; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 600; }
  .sww .bbar button small { font-size: 12px; font-weight: 500; opacity: .9; }
  .sww .bbar ~ footer { padding-bottom: 80px; }
  .sww[data-sheet] .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(15,37,36,.45); }
  .sww .st.wait .gcard:not(.ask) { display: none; }
  .sww[data-sheet="check"] .st.wait .gcard.gk-check, .sww[data-sheet="decision"] .st.wait .gcard.gk-decision, .sww[data-sheet="signoff"] .st.wait .gcard.gk-signoff { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 88vh; overflow: auto; margin: 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--paper); border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(15,37,36,.25); animation: none; }
  .sww[data-sheet] .st.wait .gcard::before { content: ""; display: block; flex: none; align-self: center; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--line); }
  .sww .gcard p { font-size: 16px; line-height: 1.4; }
  .sww .gcard .opts { flex-direction: column; align-items: stretch; }
  .sww .gcard .opts .btn { display: block; padding: 12px 14px; border-radius: 12px; white-space: normal; text-align: left; font-size: 14px; }
  .sww .gcard .opts .od { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; opacity: .85; }
  .sww .gcard .opts .btn.picked { box-shadow: 0 0 0 2px var(--teal); }
  .sww .gcard input { padding: 11px 12px; font-size: 14px; }
  .sww .tot { flex-wrap: wrap; }
  .sww .tot div { flex: 1 1 45%; }
  /* the decision sheet in three steps: pick, the reply and the reason, confirm and record */
  .sww .gk-decision > .k, .sww .gk-decision .note.lap { display: none; }
  .sww .gk-decision .shead { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
  .sww .shead .k { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sww .shead .k i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); font-style: normal; font-size: 11px; }
  .sww .shead .stepn { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .sww .gk-decision .dots { display: flex; gap: 6px; margin: 10px 0 12px; }
  .sww .dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
  .sww .dots i.on { background: var(--ok); }
  .sww .stitle { margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.3; }
  .sww .gk-decision[data-dstep="1"] .stitle.s1, .sww .gk-decision[data-dstep="2"] .stitle.s2, .sww .gk-decision[data-dstep="3"] .stitle.s3 { display: block; }
  .sww .gk-decision > p { font-size: 14px; color: var(--muted); }
  .sww .gk-decision:not([data-dstep="1"]) > p, .sww .gk-decision:not([data-dstep="1"]) > .tot, .sww .gk-decision:not([data-dstep="1"]) > .needs, .sww .gk-decision:not([data-dstep="1"]) > .opts, .sww .gk-decision[data-dstep="1"] .edit { display: none; }
  .sww .gk-decision[data-dstep="2"] .edit { display: flex; flex-direction: column; }
  .sww .gk-decision[data-dstep="2"] .edit .opts, .sww .gk-decision .edit [data-cancel] { display: none; }
  .sww .gk-decision[data-dstep="2"] .replyview { display: block; margin: 0 0 10px; padding: 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
  .sww .gk-decision .draft-edit { min-height: 180px; margin: 0 0 8px; }
  .sww .gk-decision[data-dstep="2"] .qrs { display: flex; flex-wrap: wrap; order: 1; gap: 8px; margin: 2px 0 8px; }
  .sww .gk-decision[data-dstep="2"] .edit input { order: 2; }
  .sww .gk-decision[data-dstep="2"] .edit > .note { order: 3; }
  .sww .qrs button { padding: 9px 12px; background: var(--paper); border: 1.5px solid var(--teal-line); border-radius: 12px; color: var(--ink); font-size: 13.5px; }
  .sww .qrs button.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
  .sww .gk-decision[data-dstep="3"] .edit { display: contents; }
  .sww .gk-decision[data-dstep="3"] .edit > *:not(.opts) { display: none; }
  .sww .gk-decision[data-dstep="3"] .dsum { display: block; order: 4; margin: 0 0 10px; padding: 12px 14px; background: var(--teal-soft); border: 1px solid var(--teal-line); border-radius: 12px; }
  .sww .dsum .row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; }
  .sww .dsum .row span { color: var(--muted); }
  .sww .dsum .row b { max-width: 64%; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
  .sww .dsum .row.big b { color: var(--teal-d); font-size: 16px; }
  .sww .dsum b.soft { color: var(--ink); font-weight: 500; }
  .sww .gk-decision[data-dstep="3"] .after { display: block; order: 5; margin: 0 0 4px; color: var(--muted); font-size: 12.5px; }
  .sww .gk-decision[data-dstep="3"] .edit > .opts { order: 6; margin-top: 8px; }
  .sww .gk-decision[data-dstep="3"] .edit > .opts .btn.pri { width: 100%; height: 50px; text-align: center; background: var(--ok); border-color: var(--ok); }
  .sww .gk-decision .dnav { display: flex; order: 7; gap: 8px; margin-top: 12px; }
  .sww .gk-decision > .note.by { order: 8; }
  .sww .gk-decision[data-dstep="1"] .nb.back, .sww .gk-decision[data-dstep="3"] .nb.next { display: none; }
  .sww .nb { flex: 1; height: 50px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 600; }
  .sww .nb.next { flex: 2; background: var(--teal); border-color: var(--teal); color: #fff; }
  .sww .nb:disabled { background: var(--line); border-color: var(--line); color: var(--muted); }
  /* footer */
  .sww footer { display: block; margin: 14px 0 0; padding: 12px 2px 10px; font-size: 10.5px; line-height: 1.45; }
  .sww footer p { margin: 0 0 6px; }
}