/* Today, the landing page (static/today.js), as the Prezlab Today design lays it out. Loads after design.css and uses
   its tokens: square color blocks, no shadows.
     .td-head         the greeting, the day's counts and the sync line (Today has no breadcrumbs or page heading)
     .td-hero         today at a glance: hours logged today on Dark Teal, and your company's next public holidays beside it
     .td-grid         your tasks, beside the request tiles, this week and your leave balance (one column under 1100px)
     .td-task         a task row; .td-log is Log time opened inside it
     .skeleton-today  the first-load placeholder in index.html, shaped like this page */

.today-page #breadcrumbs,.today-page .page-heading,.today-page .surface-meta{display:none}
.today-page .work-surface{min-height:0}
.td-page{display:grid;gap:var(--s5);min-width:0;max-width:1160px;margin-inline:auto}
.td-page .button.sm{min-height:var(--control-sm);padding:0 var(--s3);font-size:13px}
.td-note{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.td-link{padding:0;border:0;background:none;color:var(--ink);font:700 13px/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.td-link:hover{text-decoration-thickness:2px}

/* ---------- Greeting ---------- */
.td-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.td-head h1{margin:0;font:700 34px/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.td-head h1 em{font-family:var(--editorial);font-style:italic;font-weight:400;letter-spacing:-.035em}
.td-sub{margin:var(--s2) 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.td-head .td-sync{width:auto;padding:6px 0;white-space:nowrap}

/* ---------- Today at a glance ---------- */
.td-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);background:var(--dark-teal);color:var(--off-white)}
:root[data-theme="dark"] .td-hero{background:var(--teal-900)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .td-hero{background:var(--teal-900)}}
.td-hero-single{grid-template-columns:minmax(0,1fr)}
.td-hero>div{display:grid;align-content:start;gap:var(--s3);min-width:0;padding:var(--s5)}
.td-hero .eyebrow{color:var(--slate-300)}
.td-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3)}
.td-total .big{font:italic 200 64px/.95 var(--editorial);letter-spacing:-.04em;color:var(--light-teal)}
.td-total .of{font-size:15px;color:var(--slate-300)}
.td-daybar{display:flex;gap:2px;height:10px;background:var(--teal-800)}
.td-daybar span{min-width:3px;background:var(--sw)}
.td-legend{display:flex;flex-wrap:wrap;gap:6px var(--s4);font-size:12.5px;color:var(--slate-300)}
.td-legend>span{display:inline-flex;align-items:center;gap:6px}
.td-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--sw)}
.td-hero-holidays{border-inline-start:1px solid var(--teal-700)}
.td-hero-single .td-hero-holidays{border-inline-start:0}
.td-holiday-list{display:grid}
.td-holiday{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:10px 0;border-top:1px solid var(--teal-700)}
.td-holiday:first-child{border-top:0}
.td-holiday-date{display:grid;place-items:center;align-content:center;gap:2px;width:44px;height:44px;background:var(--light-teal);color:var(--dark-teal)}
.td-holiday-date b{font:700 17px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.td-holiday-date small{font:700 10px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.td-holiday>div{min-width:0}
.td-holiday>div b{display:block;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.td-holiday>div small{display:block;font-size:12.5px;color:var(--slate-300);font-variant-numeric:tabular-nums}
.td-holiday-when{font-size:12.5px;font-weight:700;color:var(--slate-300);white-space:nowrap}
.td-holiday-when.now{padding:3px 10px;border-radius:999px;background:var(--yellow);color:var(--dark-teal)}
/* A birthday: a cake on a lavender chip, and a small Teams button that opens a chat with the person. */
.td-birthday .td-holiday-date{background:var(--lavender)}
.td-birthday .td-holiday-date .i{width:24px;height:24px}
.td-teams{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--teal-700);color:var(--light-teal)}
.td-teams:hover{border-color:var(--light-teal);background:var(--teal-800)}
.td-teams:focus-visible{outline-color:var(--light-teal)}
.td-hero-empty{margin:0;color:var(--slate-300)}

/* ---------- Tasks beside the tiles, this week and the leave balance ---------- */
.td-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:var(--s5)}
.td-grid-single{grid-template-columns:minmax(0,1fr)}
.td-stack{display:grid;gap:var(--s5);min-width:0}
.td-task-list{display:grid}
.td-task{border-top:1px solid var(--line)}
.td-task:first-child{border-top:0}
.td-task-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3) var(--s4);padding:14px 0}
.td-task-main{display:grid;gap:4px;min-width:0}
.td-task-name{justify-self:start;padding:0;border:0;background:none;color:var(--ink);font:700 15px/1.35 var(--sans);letter-spacing:-.01em;text-align:start;overflow-wrap:anywhere}
button.td-task-name{cursor:pointer}
button.td-task-name:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.td-task-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s3);font-size:12.5px;color:var(--ink-soft)}
.td-task-project{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600}
.td-inline-link{padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.td-due-now{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700}
.td-due-now::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.td-task-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2)}
.td-task-actions .task-chat-button{min-height:var(--control-sm);padding:0 var(--s3);font-size:13px;white-space:nowrap}
.td-task-flag{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft)}
.td-task-flag::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--line-strong)}
.td-tasks>.td-link{justify-self:start}

/* Log time inside a task row: the Log time sheet's fields in the design's quick-log layout. */
.td-log{display:grid;gap:var(--s3);margin:0 0 var(--s4);padding:var(--s4);border:1px solid var(--line);background:var(--bg)}
.td-log-dest{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s2);margin:0;font-size:13px}
.td-log-dest span{color:var(--ink-soft);font-weight:600}
.td-log-dest b{overflow-wrap:anywhere}
.td-log-grid{display:grid;grid-template-columns:170px minmax(0,1fr) 150px;gap:var(--s3)}
.td-log-wide{grid-column:1/-1}
.td-log .f{display:grid;gap:6px;min-width:0;margin:0}
.td-log .f>span{font:700 13px/1.3 var(--sans);color:var(--ink)}
.td-log .req{margin-inline-start:2px;color:var(--orange);font-style:normal;font-weight:700}
.td-log .field{width:100%;min-width:0;min-height:40px;margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);font:500 14px/1.4 var(--sans)}
.td-log .field:hover{border-color:var(--line-strong)}
.td-log .field:focus{border-color:var(--ink);outline:none;box-shadow:inset 0 0 0 1px var(--ink)}
.td-log .field[aria-invalid="true"]{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.td-log textarea.field{resize:vertical}
.td-log-quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.td-chip{padding:7px 12px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);font:700 13px/1.2 var(--sans);cursor:pointer}
.td-chip:hover{border-color:var(--ink)}
.td-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--dark-teal)}
.td-log .err{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--ink);font-size:13px;font-weight:600}
.td-log .err:empty{display:none}
.td-log .err::before{content:"";flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--orange)}
.td-log-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.td-log-foot .td-note{flex:1 1 260px}
/* style.css gives tables one-line text and a 220px first column; this small table wraps its descriptions to fit a phone. */
.td-log-recent{width:100%;border-collapse:collapse;font-size:12.5px;white-space:normal}
.td-log-recent caption{padding-bottom:6px;font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-align:start;text-transform:uppercase;color:var(--ink-soft)}
.td-log-recent th{padding:6px 8px 6px 0;border-bottom:1px solid var(--line-strong);color:var(--ink-soft);font:700 12.5px/1.3 var(--sans);letter-spacing:0;text-align:start;text-transform:none}
.td-log-recent td{min-width:0;padding:7px 8px 7px 0;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:500;overflow-wrap:anywhere}
.td-log-recent td.num{white-space:nowrap}
.td-log-recent .n{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}

/* The request tiles: Time off lavender, Overtime orange, Expense sand. */
.td-tiles{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:2px}
.td-tile{display:grid;align-content:space-between;gap:var(--s3);min-height:112px;padding:var(--s4);border:0;border-radius:0;color:var(--dark-teal);font:inherit;text-align:start;cursor:pointer}
.td-tile:not(:disabled):hover{filter:brightness(.96)}
.td-tile:disabled{opacity:.55;cursor:not-allowed}
.td-tile .i{width:20px;height:20px}
.td-tile b{display:block;font-size:14px}
.td-tile>span>span{display:block;font-size:12px;opacity:.85}
.td-tile.lav{background:var(--lavender)}
.td-tile.org{background:var(--orange)}
.td-tile.snd{background:var(--sand)}

.td-week-bars{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));align-items:end;gap:var(--s2)}
.td-wday{display:grid;justify-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.td-wday .col{position:relative;width:100%;height:72px;border:1px dashed var(--line);background:var(--bg)}
.td-wday .col.filled{border-style:solid}
.td-wday .col b{position:absolute;inset-inline:0;bottom:0;background:var(--ink)}
.td-wday .col b.over{background:var(--orange)}
.td-wday.is-today{color:var(--ink);font-weight:700}
.td-wday.is-today .col{border:1px solid var(--ink)}
.td-kv{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);font-size:13.5px}
.td-kv b{font-variant-numeric:tabular-nums}
.td-meter{position:relative;height:6px;background:var(--bg)}
.td-meter b{position:absolute;inset-block:0;inset-inline-start:0;background:var(--ink)}

.td-bal{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2)}
.td-bal .big{font:italic 400 44px/1 var(--editorial);letter-spacing:-.03em}
.td-mini{display:grid}
.td-mini button{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;padding:10px 0;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.td-mini button>span:first-child{display:grid;gap:2px;min-width:0}
.td-mini .t{font-size:13.5px;font-weight:700}
.td-mini button:hover .t{text-decoration:underline;text-underline-offset:3px}
.td-mini .m{font-size:12px;color:var(--ink-soft)}

/* ---------- First-load placeholder (index.html) ---------- */
.skeleton-today .skeleton-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2px;margin-bottom:var(--s5)}
.skeleton-today .skeleton-hero .skeleton-block{height:200px}
.skeleton-today .skeleton-columns{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5)}
.skeleton-today .skeleton-panel{display:grid;align-content:start;gap:var(--s4);padding:var(--s5);background:var(--panel)}
.skeleton-today .skeleton-panel .skeleton-block{height:44px}
.skeleton-today .skeleton-side{display:grid;align-content:start;gap:var(--s5)}
.skeleton-today .skeleton-tiles{height:112px}
.skeleton-today .skeleton-week{height:220px}

@media (max-width:1100px){
 .td-grid,.skeleton-today .skeleton-columns{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
 .td-head h1{font-size:28px}
 .td-head .td-sync{display:none}
 .td-hero,.skeleton-today .skeleton-hero{grid-template-columns:minmax(0,1fr)}
 .td-hero-holidays{border-inline-start:0;border-top:1px solid var(--teal-700)}
 .td-hero-single .td-hero-holidays{border-top:0}
 .td-total .big{font-size:52px}
 .td-page .panel{padding:var(--s4)}
 .td-log-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .td-log-activity{grid-column:1/-1}
}
@media (max-width:480px){
 .td-tiles{grid-template-columns:minmax(0,1fr)}
 .td-tile{grid-template-columns:auto 1fr;align-items:center;min-height:0}
 .td-task-row{grid-template-columns:minmax(0,1fr)}
 .td-task-actions{justify-content:flex-start}
}
@media (forced-colors:active){
 .td-daybar span,.td-dot,.td-wday .col b,.td-meter b{forced-color-adjust:none}
}