/* Timeslice workspace. Root rules are scoped to .uwapp-root.uwapp-timeslice (the body carries the app class too).
   Light and dark tokens follow html[data-theme] / prefers-color-scheme. No animations. */
.uwapp-root.uwapp-timeslice {
  --ts-bg: #f3f6f6; --ts-surface: #ffffff; --ts-surface-2: #e8f0ef; --ts-ink: #17201f; --ts-muted: #4d5b5a;
  --ts-line: #d3dddc; --ts-control: #6b7a79; --ts-accent: #0f766e; --ts-accent-ink: #0b5d56; --ts-on-accent: #ffffff;
  --ts-warn: #9a3412; --ts-warn-bg: #fff4e8; --ts-danger: #b42318; --ts-focus: #b45309; --ts-grid: #e4ebea; --ts-now: #dc2626;
  background: var(--ts-bg); color: var(--ts-ink); color-scheme: light;
}
:root[data-theme="dark"] .uwapp-root.uwapp-timeslice {
  --ts-bg: #111716; --ts-surface: #1a2221; --ts-surface-2: #23302e; --ts-ink: #e9f1f0; --ts-muted: #b3c3c1;
  --ts-line: #33413f; --ts-control: #8a9b99; --ts-accent: #5eead4; --ts-accent-ink: #99f6e4; --ts-on-accent: #04231f;
  --ts-warn: #fdba74; --ts-warn-bg: #3a2414; --ts-danger: #fca5a5; --ts-focus: #fbbf24; --ts-grid: #26312f; --ts-now: #f87171;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .uwapp-root.uwapp-timeslice {
    --ts-bg: #111716; --ts-surface: #1a2221; --ts-surface-2: #23302e; --ts-ink: #e9f1f0; --ts-muted: #b3c3c1;
    --ts-line: #33413f; --ts-control: #8a9b99; --ts-accent: #5eead4; --ts-accent-ink: #99f6e4; --ts-on-accent: #04231f;
    --ts-warn: #fdba74; --ts-warn-bg: #3a2414; --ts-danger: #fca5a5; --ts-focus: #fbbf24; --ts-grid: #26312f; --ts-now: #f87171;
    color-scheme: dark;
  }
}

/* Platform element defaults (buttons, tables, code) leak into app workspaces: reset them at zero specificity. */
:where(.ts-app, .ts-dialog) button { font: inherit; font-size: .9rem; font-weight: 600; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; width: auto; min-height: 0; }
:where(.ts-app, .ts-dialog) button:hover { background: none; }
:where(.ts-app, .ts-dialog) :is(input, select, textarea) { font: inherit; color: var(--ts-ink); background: var(--ts-surface); border: 1px solid var(--ts-control); border-radius: 8px; }
:where(.ts-app, .ts-dialog) table { border-collapse: collapse; width: 100%; margin: 0; font-size: .92rem; }
:where(.ts-app, .ts-dialog) :is(th, td) { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--ts-line); }
:where(.ts-app, .ts-dialog) thead th { background: var(--ts-surface-2); color: var(--ts-ink); }
:where(.ts-app, .ts-dialog) kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; padding: 1px 6px; border: 1px solid var(--ts-control); border-bottom-width: 2px; border-radius: 5px; background: var(--ts-surface-2); color: var(--ts-ink); white-space: nowrap; }
:where(.ts-app, .ts-dialog) a { color: var(--ts-accent-ink); }
:where(.ts-app, .ts-dialog) :is(h2, h3) { color: var(--ts-ink); }
:where(.ts-app, .ts-dialog) summary { cursor: pointer; }
:where(.ts-app, .ts-dialog) fieldset { border: 1px solid var(--ts-line); border-radius: 10px; padding: .5rem .8rem; margin: 0 0 .7rem; }

.ts-tab, .ts-menu-btn, .ts-menu-item, .ts-icon-btn, .ts-title, .ts-link-btn, .ts-card-btn, .ts-chip, .ts-seg-btn { background: transparent; color: var(--ts-ink); }
.ts-app { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--ts-bg); color: var(--ts-ink); }
.ts-app :focus-visible, .ts-dialog :focus-visible { outline: 3px solid var(--ts-focus); outline-offset: 2px; }
.ts-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ts-spacer { flex: 1; }
.ts-hint { color: var(--ts-muted); font-size: .84rem; margin: .15rem 0 0; }
.ts-hint:empty { display: none; }
.ts-error { color: var(--ts-danger); font-size: .84rem; font-weight: 600; margin: .15rem 0 0; }
.ts-error[hidden] { display: none; }
.ts-warn { display: flex; align-items: center; gap: .4rem; color: var(--ts-warn); font-weight: 600; font-size: .9rem; margin: .3rem 0; }
.ts-warn svg { flex: none; }
.ts-warn-box { background: var(--ts-warn-bg); color: var(--ts-ink); border-radius: 8px; padding: .4rem .7rem; font-size: .88rem; }
.ts-warn-box p { margin: .2rem 0; font-weight: 600; color: var(--ts-warn); }
.ts-muted { color: var(--ts-muted); font-size: .86rem; }
.ts-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }
.ts-wide { width: 100%; box-sizing: border-box; padding: .4rem .55rem; }
.ts-short { max-width: 9rem; }
.ts-empty { color: var(--ts-muted); padding: 1rem 0; margin: 0; }
.ts-dot { display: inline-block; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--ts-control); }

/* ---------- buttons */
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 36px; padding: .35rem .8rem; border: 1px solid var(--ts-control); border-radius: 8px; background: var(--ts-surface); color: var(--ts-ink); font-size: .88rem; white-space: nowrap; }
.ts-btn:hover:not([disabled]) { background: var(--ts-surface-2); }
.ts-btn[disabled], .ts-icon-btn[disabled] { opacity: .55; cursor: not-allowed; }
.ts-btn-primary, :is(.ts-app, .ts-dialog) button[type=submit].ts-btn-primary { background: var(--ts-accent); border-color: var(--ts-accent); color: var(--ts-on-accent); }
.ts-btn-primary:hover:not([disabled]), :is(.ts-app, .ts-dialog) button[type=submit].ts-btn-primary:hover:not([disabled]) { background: var(--ts-accent-ink); border-color: var(--ts-accent-ink); color: var(--ts-on-accent); }
.ts-btn-stop { background: var(--ts-danger); border-color: var(--ts-danger); color: #ffffff; }
:root[data-theme="dark"] .ts-btn-stop { color: #2a0606; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ts-btn-stop { color: #2a0606; } }
.ts-btn-stop:hover:not([disabled]) { filter: brightness(1.08); background: var(--ts-danger); }
.ts-btn-danger { color: var(--ts-danger); border-color: var(--ts-danger); }
.ts-big { min-height: 48px; padding: .5rem 1.3rem; font-size: 1rem; }
.ts-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 8px; color: var(--ts-ink); flex: none; }
.ts-icon-btn:hover:not([disabled]) { background: var(--ts-surface-2); border-color: var(--ts-line); }
.ts-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .2rem .65rem; border: 1px solid var(--ts-line); border-radius: 999px; font-size: .84rem; font-weight: 600; max-width: 100%; }
.ts-chip:hover { border-color: var(--ts-accent); background: var(--ts-surface-2); }
.ts-link-btn { color: var(--ts-accent-ink); text-decoration: underline; text-align: start; }
.ts-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--ts-surface-2); color: var(--ts-ink); border: 1px solid var(--ts-line); white-space: nowrap; }
.ts-badge-warn { background: var(--ts-warn-bg); color: var(--ts-warn); border-color: var(--ts-warn); }
.ts-badge-info { background: var(--ts-surface-2); color: var(--ts-accent-ink); border-color: var(--ts-accent); margin: 0 0 .4rem; }

/* ---------- toolbar */
.ts-toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem .9rem; background: var(--ts-surface); border-bottom: 1px solid var(--ts-line); }
.ts-tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.ts-menus { gap: .15rem; }
.ts-menu-wrap { position: relative; }
.ts-menu-btn { display: inline-flex; align-items: center; gap: .2rem; min-height: 36px; padding: .3rem .6rem; border-radius: 8px; color: var(--ts-ink); }
.ts-menu-btn:hover, .ts-menu-btn[aria-expanded="true"] { background: var(--ts-surface-2); }
.ts-menu { position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 4px); min-width: 15rem; max-width: min(24rem, 92vw); padding: .3rem; background: var(--ts-surface); border: 1px solid var(--ts-control); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .22); }
.ts-menu-end .ts-menu { inset-inline-start: auto; inset-inline-end: 0; }
.ts-menu[hidden] { display: none; }
.ts-menu-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 34px; padding: .35rem .6rem; border-radius: 6px; text-align: start; font-weight: 500; color: var(--ts-ink); }
.ts-menu-item:hover, .ts-menu-item:focus { background: var(--ts-surface-2); }
.ts-menu-item[aria-disabled="true"] { color: var(--ts-muted); cursor: not-allowed; }
.ts-menu-key { color: var(--ts-muted); font-size: .78rem; font-weight: 600; }
.ts-menu-sep { height: 1px; margin: .3rem .2rem; background: var(--ts-line); }
.ts-title { font-size: 1rem; font-weight: 700; padding: .3rem .5rem; border-radius: 8px; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-title:hover { background: var(--ts-surface-2); }
.ts-timer-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .25rem .8rem; border-radius: 999px; border: 1px solid var(--ts-accent); color: var(--ts-accent-ink); background: var(--ts-surface); max-width: 20rem; }
.ts-timer-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-timer-chip.ts-running { border-color: var(--ts-danger); color: var(--ts-ink); }
.ts-chip-time { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- tabs + main */
.ts-tabs { flex: none; display: flex; gap: .2rem; padding: .3rem .7rem 0; overflow-x: auto; background: var(--ts-surface); border-bottom: 1px solid var(--ts-line); }
.ts-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 8px 8px 0 0; white-space: nowrap; color: var(--ts-muted); border-bottom: 3px solid transparent; min-height: 42px; }
.ts-tab[aria-selected="true"] { color: var(--ts-ink); border-bottom-color: var(--ts-accent); background: var(--ts-surface-2); }
.ts-tab:hover { color: var(--ts-ink); }
.ts-tab-key { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 4px; font-size: .72rem; border: 1px solid var(--ts-line); color: var(--ts-muted); }
.ts-main { position: relative; flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .9rem; }
.ts-main:focus { outline: none; }
.ts-main > * { flex: none; }
.ts-status { flex: none; display: flex; align-items: center; gap: .6rem; padding: .3rem .9rem; font-size: .82rem; color: var(--ts-muted); background: var(--ts-surface); border-top: 1px solid var(--ts-line); min-height: 28px; }
.ts-status-text { color: var(--ts-ink); }
.ts-card { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 14px; padding: .8rem .95rem; min-width: 0; }
.ts-card > h2, .ts-card summary h2, .ts-section > h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.ts-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.ts-sec-head h2 { margin: 0; font-size: 1.05rem; }

/* ---------- fields */
.ts-field { display: grid; gap: .2rem; margin: 0 0 .55rem; min-width: 0; align-content: start; }
.ts-field > label, .ts-label { font-weight: 600; font-size: .85rem; }
.ts-field :is(select, input:not([type=checkbox]):not([type=color]), textarea) { min-height: 38px; padding: .3rem .55rem; min-width: 0; width: 100%; box-sizing: border-box; }
.ts-field textarea { min-height: 38px; resize: vertical; }
.ts-check { display: flex; align-items: flex-start; gap: .5rem; margin: .2rem 0 .5rem; font-size: .9rem; }
.ts-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ts-accent); }
.ts-grow { flex: 1 1 14rem; }
.ts-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ts-combo { position: relative; display: flex; min-width: 0; }
.ts-combo .ts-combo-input { padding-inline-end: 2.2rem; }
.ts-combo-toggle { position: absolute; inset-inline-end: 2px; top: 2px; bottom: 2px; width: 2rem; display: grid; place-items: center; color: var(--ts-muted); }
.ts-combo-list { position: absolute; z-index: 40; top: calc(100% + 3px); inset-inline-start: 0; min-width: 100%; width: max-content; max-width: min(28rem, 90vw); max-height: 16rem; overflow-y: auto; margin: 0; padding: .25rem; list-style: none; background: var(--ts-surface); border: 1px solid var(--ts-control); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .22); }
.ts-combo-list[hidden] { display: none; }
.ts-combo-opt { display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; border-radius: 6px; cursor: pointer; min-height: 34px; }
.ts-combo-opt[aria-selected="true"] { background: var(--ts-surface-2); outline: 2px solid var(--ts-accent); outline-offset: -2px; }
.ts-combo-main { font-weight: 600; }
.ts-combo-sub { color: var(--ts-muted); font-size: .8rem; margin-inline-start: auto; padding-inline-start: .8rem; }
.ts-combo-create { color: var(--ts-accent-ink); font-weight: 600; border-top: 1px solid var(--ts-line); }
.ts-combo-empty { padding: .45rem .55rem; color: var(--ts-muted); font-size: .85rem; }
.ts-date { display: flex; gap: .25rem; align-items: center; }
.ts-date input { flex: 1; min-width: 0; }
.ts-quick { display: flex; gap: .3rem; flex-wrap: wrap; }
.ts-quick .ts-chip { min-height: 28px; padding: .1rem .55rem; font-size: .8rem; }
.ts-editor-row { display: flex; flex-wrap: wrap; gap: 0 .8rem; align-items: flex-start; }
.ts-editor-row > .ts-field { flex: 1 1 9rem; }
.ts-editor-row > .ts-field.ts-grow { flex: 2 1 14rem; }
.ts-editor-row > .ts-check { align-self: center; margin-top: 1rem; }
.ts-editor-row > .ts-field:first-child { flex: 1.4 1 12rem; }
.ts-nextday { color: var(--ts-accent-ink); font-weight: 600; margin-bottom: .3rem; }
.ts-overlap:empty { display: none; }
.ts-overlap { background: var(--ts-warn-bg); border: 1px solid var(--ts-warn); border-radius: 10px; padding: .3rem .7rem .4rem; margin: .2rem 0 .5rem; }
.ts-overlap-list { margin: .1rem 0; padding-inline-start: 1.2rem; font-size: .88rem; }
.ts-colors { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .2rem 0 .6rem; }
.ts-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--ts-surface); }
.ts-swatch[aria-checked="true"] { border-color: var(--ts-ink); }
.ts-colors input[type=color] { width: 44px; height: 32px; padding: 2px; }

/* ---------- dialogs */
.ts-dialog { width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid var(--ts-control); border-radius: 14px; background: var(--ts-surface); color: var(--ts-ink); box-shadow: 0 24px 60px rgb(0 0 0 / .35); overflow: auto; }
.ts-dialog-wide { width: min(50rem, calc(100vw - 1.5rem)); }
.ts-dialog::backdrop { background: rgb(5 20 18 / .55); }
.ts-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem .4rem; }
.ts-dialog-head h2 { margin: 0; font-size: 1.15rem; }
.ts-dialog-lede { margin: 0; padding: 0 1rem; color: var(--ts-muted); font-size: .9rem; }
.ts-dialog-body { padding: .6rem 1rem 1rem; }
.ts-dialog-body p { margin: .3rem 0 .6rem; }
.ts-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.ts-tip { align-self: center; margin: 0; }
.ts-stack { flex-direction: column; align-items: stretch; }
.ts-stack .ts-btn { white-space: normal; text-align: center; }
.ts-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.ts-card-btn { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .8rem; border: 1px solid var(--ts-line); border-radius: 12px; text-align: start; }
.ts-card-btn:hover { border-color: var(--ts-accent); }
.ts-card-btn span { color: var(--ts-muted); font-weight: 400; font-size: .86rem; }
.ts-recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ts-recent-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ts-linkbox { margin-top: .6rem; }
.ts-preview { margin: .3rem 0; }
.ts-cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ts-cal-title { margin: 0; font-size: 1rem; }
.ts-cal-grid { margin-top: .4rem; table-layout: fixed; }
.ts-cal-grid th { text-align: center; font-size: .78rem; color: var(--ts-muted); background: none; border: 0; padding: 4px 0; }
.ts-cal-day { text-align: center; padding: 0; height: 40px; border: 0; border-radius: 8px; cursor: pointer; font-variant-numeric: tabular-nums; }
:where(.ts-dialog) .ts-cal-grid td { border: 0; text-align: center; }
.ts-cal-day:hover { background: var(--ts-surface-2); }
.ts-cal-out { color: var(--ts-muted); }
.ts-cal-today { font-weight: 800; box-shadow: inset 0 0 0 2px var(--ts-accent); }
.ts-cal-sel { background: var(--ts-accent); color: var(--ts-on-accent); }
.ts-cal-sel:hover { background: var(--ts-accent-ink); }
.ts-cal-day:focus-visible { outline: 3px solid var(--ts-focus); outline-offset: -1px; }

/* ---------- track */
.ts-timer.ts-running { border-color: var(--ts-danger); }
.ts-timer-row { display: flex; flex-wrap: wrap; gap: 0 .9rem; align-items: flex-end; }
.ts-timer-row > .ts-field:first-child { flex: 2 1 16rem; }
.ts-timer-row > .ts-field:nth-child(2) { flex: 2 1 12rem; }
.ts-timer-go { display: flex; align-items: center; gap: .8rem; margin: 0 0 .55rem; }
.ts-elapsed { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 6.5ch; text-align: end; }
.ts-recent { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ts-chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.ts-add summary { list-style: none; display: flex; align-items: center; gap: .4rem; }
.ts-add summary::-webkit-details-marker { display: none; }
.ts-add summary::before { content: '▸'; color: var(--ts-muted); }
.ts-add[open] summary::before { content: '▾'; }
.ts-add summary h2 { margin: 0; font-size: 1.05rem; display: inline; }
.ts-add[open] summary { margin-bottom: .6rem; }
.ts-week-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-bottom: .4rem; }
.ts-week-head h2 { margin: 0; font-size: 1.05rem; }
.ts-week-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-nav { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.ts-nav-field { margin: 0 0 .55rem; align-self: flex-end; }
.ts-selbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .4rem .6rem; margin: .3rem 0; background: var(--ts-surface-2); border-radius: 10px; }
.ts-day { margin-top: .6rem; }
.ts-day-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .25rem; font-size: .95rem; padding-bottom: .2rem; border-bottom: 2px solid var(--ts-line); }
.ts-day-total { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.ts-entries { list-style: none; margin: 0; padding: 0; }
.ts-entry { display: flex; align-items: center; gap: .55rem; padding: .35rem .2rem; border-bottom: 1px solid var(--ts-line); flex-wrap: wrap; }
.ts-entry > input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--ts-accent); }
.ts-entry-main { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; }
.ts-entry-task { font-weight: 600; overflow-wrap: anywhere; }
.ts-entry-note { color: var(--ts-muted); font-size: .86rem; overflow-wrap: anywhere; }
.ts-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.ts-tag { font-size: .76rem; color: var(--ts-accent-ink); }
.ts-entry-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ts-entry-time { color: var(--ts-muted); font-size: .88rem; white-space: nowrap; }
.ts-entry-dur { font-weight: 700; min-width: 3.4rem; text-align: end; }
.ts-entry-actions { display: flex; align-items: center; }
.ts-has-overlap { background: linear-gradient(90deg, var(--ts-warn-bg), transparent 60%); }

/* ---------- calendar */
.ts-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.ts-cal-bar .ts-nav { margin-inline-start: 0; }
.ts-cal-h { margin: 0; font-size: 1.05rem; flex: 1 1 12rem; }
.ts-seg { display: inline-flex; border: 1px solid var(--ts-control); border-radius: 9px; overflow: hidden; }
.ts-seg-btn { min-height: 36px; padding: .3rem .8rem; border-radius: 0; }
.ts-seg-btn + .ts-seg-btn { border-inline-start: 1px solid var(--ts-control); }
.ts-seg-btn[aria-pressed="true"] { background: var(--ts-accent); color: var(--ts-on-accent); }
.ts-tl-wrap { overflow-x: auto; overflow-y: hidden; margin-top: .5rem; }
.ts-tl { --days: 7; display: grid; grid-template-columns: 4.6rem repeat(var(--days), minmax(6.5rem, 1fr)); grid-template-rows: auto 38rem; min-width: calc(4.6rem + var(--days) * 6.5rem); padding-bottom: .8rem; }
.ts-tl-single { grid-template-columns: 4.6rem minmax(0, 1fr); min-width: 0; }
.ts-tl-head { display: flex; align-items: center; gap: .25rem; padding: .25rem .3rem; border-bottom: 2px solid var(--ts-line); font-size: .84rem; min-width: 0; }
.ts-tl-day { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-tl-total { color: var(--ts-muted); font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.ts-tl-add.ts-icon-btn { width: 30px; height: 30px; }
.ts-tl-today .ts-tl-day { color: var(--ts-accent-ink); }
.ts-tl-hours { position: relative; border-inline-end: 1px solid var(--ts-line); }
.ts-tl-hours span { position: absolute; inset-inline-end: .35rem; transform: translateY(-50%); font-size: .72rem; color: var(--ts-muted); font-variant-numeric: tabular-nums; }
.ts-tl-hours span { white-space: nowrap; }
.ts-tl-hours span:first-child { transform: none; }
.ts-tl-hours span:last-child { transform: translateY(-100%); }
.ts-tl-col { position: relative; border-inline-end: 1px solid var(--ts-grid); }
.ts-tl-line { position: absolute; inset-inline: 0; border-top: 1px solid var(--ts-grid); }
.ts-tl-now { position: absolute; inset-inline: 0; border-top: 2px solid var(--ts-now); z-index: 2; }
.ts-block { position: absolute; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: .15rem .35rem; border-radius: 6px; text-align: start; font-size: .76rem; line-height: 1.2; color: var(--ts-ink); background: color-mix(in srgb, var(--c) 18%, var(--ts-surface)); border: 1px solid color-mix(in srgb, var(--c) 55%, var(--ts-surface)); border-inline-start: 4px solid var(--c); z-index: 1; }
.ts-block:hover, .ts-block:focus-visible { z-index: 3; background: color-mix(in srgb, var(--c) 28%, var(--ts-surface)); }
.ts-block-task { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ts-block-time, .ts-block-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--ts-muted); }
.ts-block-tiny .ts-block-time, .ts-block-tiny .ts-block-note { display: none; }
.ts-block-running { border-style: dashed; }
.ts-month-wrap { overflow-x: auto; margin-top: .5rem; }
.ts-month { table-layout: fixed; min-width: 30rem; }
.ts-month th { text-align: center; font-size: .8rem; }
.ts-month td.ts-mcell { padding: 2px; height: 5rem; vertical-align: top; border: 1px solid var(--ts-grid); }
.ts-mday { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; width: 100%; height: 100%; padding: .3rem; border-radius: 6px; text-align: start; }
.ts-mday:hover { background: var(--ts-surface-2); }
.ts-mnum { font-weight: 700; font-size: .85rem; }
.ts-mtot { font-size: .8rem; font-variant-numeric: tabular-nums; }
.ts-mbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: auto; }
.ts-mbar span { display: block; height: 100%; }
.ts-cal-out .ts-mday { color: var(--ts-muted); }
.ts-mcell.ts-cal-today { box-shadow: inset 0 0 0 2px var(--ts-accent); }

/* ---------- reports */
.ts-rep-bar { display: flex; flex-wrap: wrap; gap: 0 .8rem; align-items: flex-end; }
.ts-rep-bar > .ts-field { flex: 0 1 12rem; }
.ts-rep-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .55rem; margin-inline-start: auto; }
.ts-rep-range { margin: 0 0 .5rem; font-weight: 700; }
.ts-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; }
.ts-metric { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .75rem; border-radius: 10px; background: var(--ts-surface-2); }
.ts-metric-l { font-size: .8rem; color: var(--ts-muted); font-weight: 600; }
.ts-metric-v { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ts-metric-s { font-size: .78rem; color: var(--ts-muted); }
.ts-report { display: flex; flex-direction: column; gap: .9rem; }
.ts-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 36rem), 1fr)); gap: .9rem; }
.ts-fig svg[aria-label] { max-height: 22rem; }
.ts-charts > .ts-fig:nth-child(3) { grid-column: 1 / -1; }
.ts-charts > .ts-fig:nth-child(3) svg[aria-label] { max-height: 17rem; }
.ts-fig { margin: 0; background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 14px; padding: .7rem .8rem; min-width: 0; }
.ts-fig figcaption { font-weight: 700; margin-bottom: .3rem; }
.ts-fig svg { width: 100%; height: auto; display: block; color: var(--ts-ink); }
.ts-fig-table { margin-top: .4rem; }
.ts-fig-table summary { color: var(--ts-accent-ink); font-weight: 600; font-size: .88rem; padding: .2rem 0; }
.ts-table-wrap { overflow-x: auto; max-width: 100%; position: relative; }
.ts-table-wrap table { min-width: 26rem; }
.ts-table-wrap caption { text-align: start; font-weight: 700; padding: .3rem 0; caption-side: top; }
.ts-table-wrap tbody th { font-weight: 600; }
.ts-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.ts-app) th.ts-num { text-align: end; }
.ts-cellname { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ts-row-actions { display: inline-flex; align-items: center; }
.ts-shared h2 { margin: .2rem 0 .3rem; }

/* ---------- small screens */
@media (max-width: 640px) {
  .ts-main { padding: .55rem; gap: .6rem; }
  .ts-toolbar { padding: .4rem .5rem; gap: .3rem .5rem; }
  .ts-title { max-width: 12rem; }
  .ts-timer-chip { max-width: 100%; }
  .ts-card { padding: .65rem .7rem; }
  .ts-timer-go { width: 100%; justify-content: space-between; }
  .ts-entry-meta { width: 100%; padding-inline-start: 2.2rem; }
  .ts-entry-actions { margin-inline-start: auto; }
  .ts-rep-actions { margin-inline-start: 0; }
  .ts-nav { margin-inline-start: 0; }
  .ts-elapsed { font-size: 1.35rem; }
}
@media print {
  .ts-toolbar, .ts-tabs, .ts-status { display: none; }
}
/* team timesheets (Teamspaces, team.js) */
.ts-menu-wrap[hidden] { display: none; }
.ts-ws-chip { display: inline-flex; min-width: 0; max-width: 100%; color: var(--ts-ink); }
.ts-ws-chip:empty { display: none; }
.uwapp-root.uwapp-timeslice .uwt-readonly { flex: none; }
.ts-team-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.ts-dialog h3 { font-size: 1rem; margin: .8rem 0 .4rem; }
.ts-st-approved { border-color: var(--ts-accent); color: var(--ts-accent-ink); }
.ts-st-rejected, .ts-st-changed { border-color: var(--ts-warn); color: var(--ts-warn); background: var(--ts-warn-bg); }
.ts-st-submitted { border-color: var(--ts-control); }
.ts-dialog .ts-row-actions { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.ts-dialog .ts-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .3rem 0 .5rem; }