:root {
    --app-bg: #1d2125;
    --toolbar: #161a1d;

    /* Board surfaces are light: grey columns holding white cards with black text. */
    --column: #ebecf0;
    --column-head: #172b4d;
    --card: #ffffff;
    --card-text: #172b4d;
    --card-muted: #5e6c84;
    --card-border: #dfe1e6;
    --card-hover: #f4f5f7;

    --toolbar-text: #b6c2cf;
    --toolbar-muted: #8c9bab;
    --toolbar-input: #2c333a;
    --toolbar-border: #38414a;
    --accent: #0c66e4;

    --label-green: #4bce97;  --label-yellow: #f5cd47; --label-orange: #fea362;
    --label-red: #f87168;    --label-purple: #9f8fef; --label-blue: #579dff;
    --label-sky: #6cc3e0;    --label-lime: #94c748;   --label-pink: #e774bb;
    --label-black: #8590a2;  --label-pink-dark: #ae4787; --label-none: #b3bac5;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; height: 100%;
    background: var(--app-bg); color: var(--toolbar-text);
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- shell ---- */
.board-shell {
    display: flex; flex-direction: column; height: 100vh;
    background-color: var(--app-bg);
    background-size: cover; background-position: center; background-repeat: no-repeat;
}

.toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; background: rgba(22, 26, 29, .85);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--toolbar-border); flex: 0 0 auto;
}
.board-name { font-weight: 700; color: #fff; font-size: 16px; margin-right: 8px; }
.toolbar .summary { margin-left: auto; color: var(--toolbar-muted); font-size: 12px; white-space: nowrap; }
.bg-error { color: var(--label-orange); margin-right: 10px; }

.search, .label-filter {
    background: var(--toolbar-input); color: var(--toolbar-text);
    border: 1px solid var(--toolbar-border); border-radius: 4px; padding: 6px 10px; font-size: 13px;
}
.search { width: 240px; }
.search:focus, .label-filter:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--toolbar-muted); cursor: pointer; }

/* Background upload: a styled label wrapping a hidden file input. */
.bg-control { display: flex; align-items: center; gap: 4px; }
.bg-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--toolbar-input); color: var(--toolbar-text);
    border: 1px solid var(--toolbar-border); border-radius: 4px;
    padding: 6px 10px; font-size: 13px; cursor: pointer;
}
.bg-btn:hover { background: #38414a; }
.bg-btn input[type=file] { display: none; }
.bg-clear {
    background: var(--toolbar-input); color: var(--toolbar-muted);
    border: 1px solid var(--toolbar-border); border-radius: 4px;
    padding: 6px 8px; cursor: pointer; font-size: 12px;
}
.bg-clear:hover { color: #fff; }

.board-message { padding: 48px; color: var(--toolbar-text); text-align: center; }
.board-message code { background: var(--toolbar-input); padding: 2px 6px; border-radius: 3px; }

/* ---- board ---- */
.board {
    flex: 1 1 auto; display: flex; gap: 8px;
    /* Less padding at the bottom than the sides: the columns should reach the tray. */
    padding: 12px 12px 4px; overflow-x: auto; overflow-y: hidden;
    /* flex-start, not stretch: a short list stays short so the board background shows
       beneath it, the way Trello does. max-height on the column still bounds the
       scroll pane, so long lists scroll rather than overflow. */
    align-items: flex-start; min-height: 0;
}

/* The board is the horizontal scroller when there are more columns than fit. The platform
   default is nearly invisible against the dark board - and where the browser draws an
   overlay scrollbar it fades out entirely, leaving no cue that there is more to the right.
   So draw it explicitly, and keep it always visible. */
/* 33px - 14 originally, then 22, now half again. At 14 the thumb was an 8px sliver after its
   inset border: fine with a mouse, hopeless with a fingertip. At 33 with a 5px inset the grip
   is 23px, comfortably past the ~24px touch target a thumb wants. */
.board::-webkit-scrollbar, .dt-cards::-webkit-scrollbar { height: 33px; }
.board::-webkit-scrollbar-track, .dt-cards::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .42); border-radius: 17px;
}
.board::-webkit-scrollbar-thumb, .dt-cards::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .58); border-radius: 17px;
    /* Inset border keeps the thumb clear of the track edge; 5px of 33 leaves a 23px grip. */
    border: 5px solid transparent; background-clip: content-box;
    min-width: 48px;   /* a wide board otherwise shrinks the thumb to almost nothing */
}
.board::-webkit-scrollbar-thumb:hover, .dt-cards::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .78); background-clip: content-box;
}
.board::-webkit-scrollbar-thumb:active, .dt-cards::-webkit-scrollbar-thumb:active {
    background: var(--accent); background-clip: content-box;
}
/* Firefox has no ::-webkit-scrollbar. It must be a separate rule: Chrome ignores the
   pseudo-elements above as soon as scrollbar-color is set to anything but auto. */
@supports not selector(::-webkit-scrollbar) {
    .board, .dt-cards {
        scrollbar-color: rgba(255, 255, 255, .58) rgba(0, 0, 0, .42);
        /* Firefox takes a keyword, not a pixel height; "auto" is its widest. */
        scrollbar-width: auto;
    }
}

.column {
    /* width + min-width:0 both matter: a flex item defaults to min-width:auto, which lets
       long unbroken content (a pasted URL) stretch the column past its flex-basis. */
    flex: 0 0 272px; width: 272px; min-width: 0;
    max-height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--column); border-radius: 12px; padding: 8px;
    border: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(9, 30, 66, .25);
}
.column.drop-target { border-color: var(--accent); }
/* Drop indicator: a line above the card the dragged one would land before. */
.card-tile.drop-before { box-shadow: 0 -3px 0 0 var(--accent), 0 1px 1px rgba(9, 30, 66, .25); }

.column header { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; flex: 0 0 auto; }
.column .name {
    font-weight: 600; color: var(--column-head); font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.column .count {
    margin-left: auto; color: var(--card-muted); font-size: 12px;
    background: rgba(9, 30, 66, .08); border-radius: 10px; padding: 1px 8px; flex: 0 0 auto;
}
.archived-flag {
    font-size: 10px; color: var(--card-muted); border: 1px solid var(--card-border);
    border-radius: 3px; padding: 0 4px; flex: 0 0 auto;
}

/* min-height:0 is required or the flex child refuses to shrink and never scrolls. */
.cards { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; }
.cards .empty { color: var(--card-muted); font-size: 12px; padding: 8px 6px; }

/* ---- cards ---- */
.card-tile {
    background: var(--card); border-radius: 8px; padding: 8px 10px;
    margin-bottom: 8px; cursor: pointer;
    box-shadow: 0 1px 1px rgba(9, 30, 66, .25);
    border: 1px solid transparent;
}
.card-tile:hover { background: var(--card-hover); border-color: #c1c7d0; }
.card-tile.dragging { opacity: .4; }
/* anywhere, not break-word: a long URL with no spaces must still break. */
.card-tile .title { color: var(--card-text); overflow-wrap: anywhere; }

.labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.label { width: 32px; height: 8px; border-radius: 4px; background: var(--label-none); }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--card-muted); }
.badge.due { border-radius: 3px; padding: 0 5px; }
.badge.due.overdue { background: var(--label-red); color: #fff; font-weight: 600; }
.badge.due.done { background: var(--label-green); color: #172b4d; font-weight: 600; }
.badge.archived { background: #dfe1e6; color: var(--card-muted); border-radius: 3px; padding: 0 5px; }

/* ---- column footer / composer ---- */
.column-foot { flex: 0 0 auto; padding-top: 4px; }
.add-card {
    width: 100%; text-align: left; padding: 8px 10px;
    background: transparent; color: var(--card-muted);
    border: none; border-radius: 8px; cursor: pointer; font: inherit;
}
.add-card:hover { background: rgba(9, 30, 66, .08); color: var(--card-text); }

.composer {
    width: 100%; resize: none; padding: 8px 10px;
    border: 2px solid var(--accent); border-radius: 8px;
    font: inherit; color: var(--card-text); background: var(--card);
}
.composer:focus { outline: none; }
.composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.btn-primary {
    background: var(--accent); color: #fff; border: none;
    border-radius: 4px; padding: 6px 12px; cursor: pointer; font: inherit;
}
.btn-primary:disabled { background: #a6c5f7; cursor: default; }
.btn-plain {
    background: none; border: none; color: var(--card-muted);
    font-size: 16px; cursor: pointer; padding: 2px 6px;
}
.btn-plain:hover { color: var(--card-text); }

.load-more {
    width: 100%; margin-top: 2px; padding: 6px;
    background: transparent; color: var(--card-muted);
    border: none; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px;
}
.load-more:hover:not(:disabled) { background: rgba(9, 30, 66, .08); color: var(--card-text); }
.load-more:disabled { cursor: default; opacity: .6; }

/* ---- centered card dialog ---- */
.dialog-backdrop {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(9, 30, 66, .54);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.dialog {
    background: #fff; color: var(--card-text);
    width: min(720px, 100%); max-height: 88vh;
    border-radius: 12px; box-shadow: 0 8px 32px rgba(9, 30, 66, .32);
    display: flex; flex-direction: column; overflow: hidden;
}
.dialog-loading { padding: 32px; color: var(--card-muted); }

.dialog-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--card-border); flex: 0 0 auto;
}
.list-chip {
    background: #dfe1e6; color: var(--card-text);
    border-radius: 4px; padding: 3px 10px; font-size: 13px; font-weight: 600;
}
.head-actions { margin-left: auto; display: flex; gap: 4px; }
.icon-btn {
    background: none; border: none; color: var(--card-muted);
    font-size: 16px; line-height: 1; cursor: pointer;
    padding: 6px 8px; border-radius: 4px; text-decoration: none;
}
.icon-btn:hover { background: #f4f5f7; color: var(--card-text); }

.dialog-body { padding: 16px 20px 24px; overflow-y: auto; flex: 1 1 auto; }
.card-title-row { display: flex; align-items: flex-start; gap: 12px; }
.status-dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #8590a2; flex: 0 0 auto; margin-top: 5px;
}
.status-dot.archived { background: #8590a2; }
.dialog h2 { margin: 0; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.dialog h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--card-muted); margin: 22px 0 8px;
}
.dialog .placeholder { color: var(--card-muted); margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 30px; }
.label-pill { border-radius: 4px; padding: 3px 10px; font-size: 12px; font-weight: 600; color: #172b4d; background: var(--label-none); }
.chip { border-radius: 4px; padding: 3px 10px; font-size: 12px; background: #dfe1e6; color: var(--card-muted); }
.chip.due.overdue { background: var(--label-red); color: #fff; font-weight: 600; }
.chip.due.done { background: var(--label-green); color: #172b4d; font-weight: 600; }

.desc, .comment-text {
    white-space: pre-wrap; overflow-wrap: anywhere; font: inherit;
    background: #f4f5f7; border-radius: 8px; padding: 12px; margin: 0; color: var(--card-text);
}
.attachments { list-style: none; padding: 0; margin: 0; }
.attachments li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
.attachments a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.attachments a:hover { text-decoration: underline; }
.attachments .size { margin-left: auto; font-size: 11px; color: var(--card-muted); white-space: nowrap; }
.attachments .size.pending { color: #b25e00; }

.comment { margin-bottom: 14px; }
.comment-meta { font-size: 11px; color: var(--card-muted); margin-bottom: 4px; }

/* ---- label colours ---- */
.label-green,.label-pill.label-green{background:var(--label-green)}
.label-yellow,.label-pill.label-yellow{background:var(--label-yellow)}
.label-orange,.label-pill.label-orange{background:var(--label-orange)}
.label-red,.label-pill.label-red{background:var(--label-red)}
.label-purple,.label-pill.label-purple{background:var(--label-purple)}
.label-blue,.label-pill.label-blue{background:var(--label-blue)}
.label-sky,.label-pill.label-sky{background:var(--label-sky)}
.label-lime,.label-pill.label-lime{background:var(--label-lime)}
.label-pink,.label-pill.label-pink{background:var(--label-pink)}
.label-black,.label-pill.label-black{background:var(--label-black)}
.label-pink-dark,.label-pill.label-pink-dark{background:var(--label-pink-dark);color:#fff}
.label-none{background:var(--label-none)}

/* ---- card covers ---- */
.card-tile { padding: 0; overflow: hidden; }
.card-body { padding: 8px 10px; }
/* Fixed height with cover: a tall screenshot must not turn one card into a whole column. */
.cover {
    display: block; width: 100%; height: 140px;
    object-fit: cover; object-position: top center;
    background: #f4f5f7; border-bottom: 1px solid var(--card-border);
}

.dialog-cover { background: #f4f5f7; border-bottom: 1px solid var(--card-border); text-align: center; }
.dialog-cover img { max-width: 100%; max-height: 260px; object-fit: contain; display: inline-block; }

/* ---- dialog card settings ---- */
.card-props { border-bottom: 1px solid var(--card-border); padding-bottom: 16px; }
.prop-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.prop-label { font-size: 13px; color: var(--card-muted); width: 150px; flex: 0 0 auto; }

/* ---- toggle switch ---- */
.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    width: 38px; height: 22px; border-radius: 11px;
    background: #c1c7d0; position: relative; transition: background .15s ease;
    display: inline-block;
}
.switch .knob {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform .15s ease;
    box-shadow: 0 1px 2px rgba(9, 30, 66, .35);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track .knob { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- (the per-card Personal flag was removed; its marker styles went with it) ---- */

/* Compact switch for the column header, where space is tight. */
.switch-sm .track { width: 28px; height: 16px; border-radius: 8px; }
.switch-sm .knob { width: 12px; height: 12px; top: 2px; left: 2px; }
.switch-sm input:checked + .track .knob { transform: translateX(12px); }
.column header .switch-sm { flex: 0 0 auto; }

/* ---- priority / value chips ---- */
.marker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.marker-chip {
    display: inline-block; border-radius: 4px; padding: 2px 8px;
    font-size: 11px; font-weight: 700; line-height: 16px;
    color: #fff; text-shadow: 0 1px 1px rgba(9, 30, 66, .28);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- marker pickers in the dialog ---- */
.chip-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pick-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 2px solid transparent; border-radius: 5px;
    padding: 4px 10px; cursor: pointer; font: inherit;
    font-size: 12px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 1px rgba(9, 30, 66, .28);
}
.pick-chip.selected { border-color: #172b4d; }
.pick-chip.none {
    background: #f4f5f7; color: var(--card-muted); text-shadow: none; font-weight: 600;
    border: 1px solid var(--card-border);
}
.pick-chip.none.selected { border: 2px solid #172b4d; }
.chip-x { opacity: .75; font-size: 10px; }
.chip-x:hover { opacity: 1; }
.pick-add {
    background: #f4f5f7; border: 1px solid var(--card-border); border-radius: 5px;
    width: 28px; height: 26px; cursor: pointer; color: var(--card-muted);
    font-size: 15px; line-height: 1; padding: 0;
}
.pick-add:hover { background: #ebecf0; color: var(--card-text); }

.add-marker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 162px; }
.add-marker input[type=color] {
    width: 34px; height: 30px; padding: 0; border: 1px solid var(--card-border);
    border-radius: 4px; background: none; cursor: pointer;
}
.add-marker .marker-name {
    flex: 1 1 auto; max-width: 200px; padding: 6px 10px; font: inherit;
    border: 1px solid var(--card-border); border-radius: 4px; color: var(--card-text);
}
.add-marker .marker-name:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---- link previews ---- */
.link-preview { display: block; }
.link-image {
    display: block; width: 100%; height: 120px; object-fit: cover;
    border-radius: 6px; background: #f4f5f7; margin-bottom: 6px;
}
.link-title {
    color: var(--card-text); font-weight: 600; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}
.link-site { color: var(--card-muted); font-size: 11px; margin-top: 2px; }
/* A screenshot is the top of a desktop-width page: keep its shape, show it from the top, and
   outline it, since most pages are white on a white card. */
.link-image.shot {
    height: auto; aspect-ratio: 16 / 10; object-position: top;
    border: 1px solid var(--card-border);
}

/* "Open in browser", under the title of a card whose title is a URL. Lined up with the title
   text: the status dot is 18px plus a 12px gap. */
.open-link-row { margin: 10px 0 4px 30px; }
a.open-link { display: inline-block; text-decoration: none; font-weight: 600; }

/* Until a preview is fetched, clamp the raw URL rather than let it run for 20 lines. */
.title.is-url {
    color: var(--accent);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- sign in ---- */
.login-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--app-bg); padding: 24px;
}
.login-card {
    background: #fff; color: var(--card-text);
    width: min(380px, 100%); padding: 32px;
    border-radius: 12px; box-shadow: 0 8px 32px rgba(9, 30, 66, .32);
}
.login-card h1 { margin: 0; font-size: 22px; }
.login-card .sub { margin: 4px 0 24px; color: var(--card-muted); font-size: 13px; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12px; font-weight: 600; color: var(--card-muted); margin-bottom: 4px; }
.field input {
    width: 100%; padding: 9px 12px; font: inherit; color: var(--card-text);
    border: 1px solid var(--card-border); border-radius: 6px; background: #fff;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.login-btn { width: 100%; padding: 10px; margin-top: 6px; font-weight: 600; }
.login-error {
    background: #ffecea; color: #ae2a19; border-radius: 6px;
    padding: 8px 12px; font-size: 13px; margin-bottom: 12px;
}
.validation-message { color: #ae2a19; font-size: 12px; }
.signout { color: var(--toolbar-muted); font-size: 12px; text-decoration: none; margin-left: 4px; }
.signout:hover { color: #fff; text-decoration: underline; }

/* ---- add a column ---- */
.add-column {
    flex: 0 0 272px; width: 272px; min-width: 0;
    background: rgba(9, 30, 66, .22); border-radius: 12px; padding: 8px;
    backdrop-filter: blur(2px);
}
.add-column-btn {
    width: 100%; text-align: left; padding: 10px;
    background: transparent; border: none; border-radius: 8px;
    color: #fff; cursor: pointer; font: inherit; font-weight: 600;
}
.add-column-btn:hover { background: rgba(255, 255, 255, .18); }
.add-column .composer { border-color: #fff; }

/* ---- drag feedback ---- */
/* While the move is in flight: a progress cursor, and cards stop inviting another drag. */
body.card-moving, body.card-moving * { cursor: progress !important; }
body.card-moving .card-tile { pointer-events: none; }

/* The dragged card is dimmed at source while the gesture is in progress. */
.card-tile.dragging { opacity: .4; }

/* Where it landed: a brief lift and highlight so the eye can follow it into the column. */
@keyframes card-land {
    0%   { transform: scale(1.04); box-shadow: 0 6px 16px rgba(9, 30, 66, .35); background: #e9f2ff; }
    60%  { transform: scale(1);    box-shadow: 0 3px 8px rgba(9, 30, 66, .28);  background: #e9f2ff; }
    100% { transform: scale(1);    box-shadow: 0 1px 1px rgba(9, 30, 66, .25);  background: var(--card); }
}
.card-tile.just-landed { animation: card-land .9s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .card-tile.just-landed { animation: none; outline: 2px solid var(--accent); }
}
/* Dropping past the last card appends to the end - show that too. */
.column.drop-at-end .cards::after {
    content: ""; display: block; height: 3px; border-radius: 2px;
    background: var(--accent); margin: 2px 0 6px;
}

/* ---- board picker and editor ---- */
.board-picker select {
    background: rgba(255,255,255,.14); color: #fff;
    border: 1px solid rgba(255,255,255,.28); border-radius: 4px;
    padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 600;
    max-width: 220px;
}
.board-picker select option { color: #172b4d; background: #fff; }
.toolbar-btn { color: var(--toolbar-text); font-size: 15px; }
.toolbar-btn:hover { background: rgba(255,255,255,.16); color: #fff; }

.board-editor {
    position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
    z-index: 30; width: min(460px, 94vw);
    background: #fff; color: var(--card-text);
    border-radius: 10px; box-shadow: 0 8px 28px rgba(9,30,66,.32); padding: 14px 16px;
}
.be-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.be-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.be-row input[type=color] {
    width: 34px; height: 30px; flex: 0 0 auto; padding: 0; cursor: pointer;
    border: 1px solid var(--card-border); border-radius: 4px; background: none;
}
.be-name {
    flex: 1 1 auto; min-width: 0; padding: 6px 10px; font: inherit;
    border: 1px solid var(--card-border); border-radius: 4px; color: var(--card-text);
}
.be-name:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.be-default { font-size: 11px; color: var(--card-muted); flex: 0 0 auto; }
.be-add { border-top: 1px solid var(--card-border); padding-top: 10px; margin-top: 10px; }
.be-hint { font-size: 12px; color: var(--card-muted); margin: 6px 0 0; }

/* Board selector in a column header. */
.col-board {
    flex: 0 0 auto; max-width: 92px; font-size: 11px; padding: 2px 4px;
    border: 1px solid var(--card-border); border-radius: 4px;
    background: #fff; color: var(--card-muted); cursor: pointer;
}
.col-board:hover { color: var(--card-text); }

/* ---- board tabs ---- */
.board-tabs {
    display: flex; gap: 2px; align-items: flex-end; flex: 0 0 auto;
    padding: 0 12px; background: rgba(9, 30, 66, .35);
    overflow-x: auto; overflow-y: hidden;
}
.board-tab {
    background: rgba(255,255,255,.10); color: var(--toolbar-text);
    border: none; border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0; padding: 8px 16px;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.board-tab:hover { background: rgba(255,255,255,.18); color: #fff; }
.board-tab.active { background: #fff; color: #172b4d; }
.board-tab.add { font-size: 16px; padding: 8px 14px; }
.tab-master { font-size: 11px; opacity: .85; }
.be-master {
    background: none; border: 1px solid var(--card-border); border-radius: 4px;
    cursor: pointer; padding: 4px 7px; color: #b3bac5; flex: 0 0 auto;
}
.be-master.on { color: #e8a33d; border-color: #e8a33d; }

/* ---- day tray ---- */
/* A normal flex child of .board-shell, not fixed to the viewport - see the comment on the
   DayTray element in Home.razor. flex: 0 0 auto means it takes exactly its content height and
   the board gets the rest, so no space is reserved and none is wasted.
   max-height caps it if a lot of cards are planned; the strip scrolls horizontally anyway. */
.day-tray {
    position: relative; z-index: 20; flex: 0 0 auto;
    background: #101204; color: var(--toolbar-text);
    border-top: 3px solid var(--accent);
    box-shadow: 0 -4px 16px rgba(9, 30, 66, .45);
    max-height: 240px;
    /* A row, not a column: the master switch is pinned to the left and the rest scrolls
       beside it, so the button never moves however many cards are on the tray. */
    display: flex; flex-direction: row; align-items: stretch;
}
.day-tray.tracking-off { border-top-color: #6b7280; }
/* The body holds what used to be the whole tray. min-width:0 lets it shrink so the strip
   scrolls instead of pushing the master button off the edge. */
.dt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.day-tray.drop-target { border-top-color: #4bce97; background: #16210d; }
.day-tray header {
    display: flex; align-items: center; gap: 14px;
    /* 4px, was 6px: with the tray in the flow every pixel here is a pixel the columns lose. */
    padding: 4px 14px; font-size: 12px; flex: 0 0 auto;
}
.dt-title { font-weight: 700; color: #fff; }
.dt-total {
    background: rgba(255,255,255,.14); border-radius: 10px;
    padding: 2px 10px; font-weight: 700; color: #fff;
}
.dt-running { color: #4bce97; font-weight: 600; }
.dt-hint { margin-left: auto; color: var(--toolbar-muted); }
.dt-empty { color: var(--toolbar-muted); padding: 14px; font-size: 13px; }

.dt-cards {
    display: flex; gap: 8px; align-items: stretch;
    padding: 0 14px 6px; overflow-x: auto; flex: 1 1 auto; min-height: 0;
}
.dt-card {
    flex: 0 0 210px; background: var(--card); color: var(--card-text);
    border-radius: 8px; padding: 8px 10px; cursor: pointer;
    border: 2px solid transparent; display: flex; flex-direction: column; gap: 4px;
}
.dt-card:hover { border-color: var(--accent); }
/* A running card is unmistakable: green edge and a pulsing time. */
.dt-card.running { border-color: #4bce97; background: #f0fff7; }
.dt-card-head { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.dt-remove {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--card-muted); font-size: 12px; line-height: 1; padding: 2px 4px;
}
.dt-remove:hover { color: #ae2a19; }
.dt-name {
    font-weight: 600; font-size: 13px; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.dt-meta { display: flex; align-items: baseline; gap: 8px; margin-top: auto; font-size: 11px; }
.dt-list { color: var(--card-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-time { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.dt-card.running .dt-time { color: #216e4e; animation: dt-pulse 2s ease-in-out infinite; }
@keyframes dt-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

@media (prefers-reduced-motion: reduce) {
    .dt-card.running .dt-time { animation: none; }
}

/* ---- description editing and delete ---- */
.link-btn {
    background: none; border: none; color: var(--accent); cursor: pointer;
    font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
    margin-left: 8px; padding: 0; text-decoration: underline;
}
.desc-edit {
    width: 100%; padding: 10px; font: inherit; resize: vertical;
    border: 2px solid var(--accent); border-radius: 6px; color: var(--card-text);
    background: #fff;
}
.desc-edit:focus { outline: none; }
.dialog .placeholder, .dialog .desc { cursor: text; }
.dialog .desc:hover, .dialog .placeholder:hover { background: #ebecf0; }

.icon-btn.danger:hover { background: #ffecea; color: #ae2a19; }
.delete-confirm {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #ffecea; color: #ae2a19; padding: 10px 16px; font-size: 13px;
    border-bottom: 1px solid #ffd5d2;
}
.btn-danger {
    background: #ae2a19; color: #fff; border: none; border-radius: 4px;
    padding: 6px 12px; cursor: pointer; font: inherit; font-weight: 600;
}
.btn-danger:disabled { opacity: .6; cursor: default; }

/* A move that could not be persisted. The board has already snapped back to the database,
   so this explains why a card jumped rather than leaving it looking like a glitch. */
.board-message.move-error {
    display: flex; align-items: center; gap: 10px;
    background: #601e1e; color: #ffd5d5; border: 1px solid #a33;
    border-radius: 4px; padding: 8px 12px; margin: 8px 0;
}


/* ---- Type chips ------------------------------------------------------------
   Same shape as Priority and Value, but outlined rather than solid so a row of several
   reads as a set of tags and does not compete with the single Priority chip beside them. */
.marker-chip.type {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    filter: saturate(.85);
}

/* ---- Notes, edited in place ------------------------------------------------
   There is no Edit button, so the text itself has to look clickable: a faint dashed edge on
   hover, and a caret cursor rather than a pointer, because clicking puts you in the text. */
.notes-editable { cursor: text; border-radius: 4px; padding: 6px 8px; margin: 0 -8px;
                  border: 1px dashed transparent; transition: border-color .12s, background .12s; }
.notes-editable:hover { border-color: var(--toolbar-border); background: rgba(255, 255, 255, .04); }

.notes-section h3 { display: flex; align-items: baseline; gap: 10px; }
.notes-hint { font-weight: 400; font-size: 11px; color: var(--card-muted); }
.notes-hint .saved { color: #4bce97; }

/* Escape-to-cancel and click-away-to-save mean the textarea is the whole control; give it
   room and a clear focus edge so it is obvious you are in edit mode. */
.desc-edit:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

@media (pointer: coarse) {
    /* Touch: bigger tap targets on the chip pickers, which are the fiddliest part of the
       dialog on a tablet. */
    .pick-chip, .pick-add { min-height: 34px; padding: 6px 12px; }
    .notes-editable { padding: 10px 8px; }
}

/* ---- editing in place: card title, board tab ------------------------------
   The input is styled to sit where the text was, so committing an edit does not make the
   layout jump. Same reason the h2 and the input share a font size and weight. */
.title-edit {
    flex: 1 1 auto; min-width: 0;
    font-size: 20px; font-weight: 600; line-height: 1.3;
    color: var(--card-text); background: var(--card);
    border: 1px solid var(--accent); border-radius: 4px; padding: 3px 8px;
}
.title-edit:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.card-title-row h2.notes-editable { margin: 0; }

/* The pencil and bin only appear on the active tab, so an inactive tab stays a plain target
   and neither can be hit by accident while switching boards. */
.tab-edit, .tab-del {
    margin-left: 6px; opacity: .55; font-size: 11px; cursor: pointer;
    padding: 2px 3px; border-radius: 3px;
}
.tab-edit:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.tab-del:hover { opacity: 1; background: rgba(226, 72, 61, .85); }

.board-tab.renaming {
    font: inherit; font-weight: 600;
    color: #fff; background: rgba(0, 0, 0, .45);
    border: 1px solid var(--accent); border-bottom-width: 3px;
    border-radius: 6px 6px 0 0; padding: 6px 12px; min-width: 120px;
}
.board-tab.renaming:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---- destructive confirmation --------------------------------------------
   Deliberately not a comfortable dialog. The confirm button stays disabled until the word is
   typed, so there is no muscle-memory path through it. */
.confirm-dialog {
    background: var(--card); color: var(--card-text);
    border-radius: 8px; padding: 20px 22px; width: min(460px, 92vw);
    box-shadow: 0 12px 32px rgba(9, 30, 66, .5);
    border-top: 4px solid #e2483d;
}
.confirm-dialog h3 { margin: 0 0 10px; font-size: 16px; }
.cd-what { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.cd-warn { margin: 0 0 14px; font-size: 13px; font-weight: 700; color: #c9372c; }
.cd-label { display: block; font-size: 12px; color: var(--card-muted); }
.cd-input {
    display: block; width: 100%; margin-top: 6px; box-sizing: border-box;
    padding: 8px 10px; font-size: 14px;
    border: 1px solid var(--toolbar-border); border-radius: 4px;
}
.cd-input:focus { outline: 2px solid #e2483d; outline-offset: -1px; }
.cd-error { color: #c9372c; font-size: 12px; margin: 10px 0 0; }
.cd-actions { display: flex; gap: 8px; margin-top: 16px; }
.cd-actions .btn-danger[disabled] { opacity: .45; cursor: not-allowed; }

@media (pointer: coarse) {
    /* The tab controls are small targets; give them room on touch. */
    .tab-edit, .tab-del { font-size: 14px; padding: 4px 6px; margin-left: 8px; }
}

/* ---- tray master switch ----------------------------------------------------
   Pinned to the left of the strip, full height, so it is always in the same place and is a
   large target on touch. Green when armed, grey when off - and the whole tray's top border
   goes grey with it, so the state is readable from across the room. */
.dt-master {
    flex: 0 0 auto; width: 116px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: none; border-right: 1px solid rgba(255, 255, 255, .14);
    cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
    padding: 8px 6px; text-align: center; line-height: 1.25;
}
.dt-master.on  { background: #1c3329; color: #7ee2b8; }
.dt-master.off { background: #2a2d31; color: #9aa4b2; }
.dt-master.on:hover  { background: #244536; }
.dt-master.off:hover { background: #34383d; }
.dt-master-mark { font-size: 20px; line-height: 1; }
.dt-master:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dt-off-note { color: #9aa4b2; font-style: italic; }

/* A tray card being dropped before shows the marker on its left edge, not its top - the
   strip runs horizontally. */
.dt-card.drop-before { box-shadow: -3px 0 0 0 var(--accent), 0 1px 1px rgba(9, 30, 66, .25); }

/* ---- timesheet ------------------------------------------------------------- */
.timesheet-backdrop { z-index: 60; }
.timesheet-dialog {
    background: var(--card); color: var(--card-text);
    border-radius: 8px; width: min(620px, 94vw); max-height: 84vh; overflow: auto;
    box-shadow: 0 12px 32px rgba(9, 30, 66, .5); padding: 18px 20px;
}
.ts-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ts-head h3 { margin: 0; font-size: 16px; display: flex; align-items: baseline; gap: 10px; }
.ts-card { font-weight: 400; font-size: 13px; color: var(--card-muted); }
.ts-head .icon-btn { margin-left: auto; }
.ts-loading, .ts-empty { color: var(--card-muted); font-size: 13px; margin: 8px 0; }

.ts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-table th, .ts-table td { padding: 7px 10px; text-align: left; }
.ts-table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--card-muted); border-bottom: 2px solid var(--card-border);
}
.ts-table tbody tr:nth-child(even) { background: rgba(9, 30, 66, .04); }
.ts-table tbody td { border-bottom: 1px solid var(--card-border); }
/* Tabular figures so the times form a column that can be read down. */
.ts-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ts-table .dim { color: var(--card-muted); font-variant-numeric: tabular-nums; }
.ts-table .strong { font-weight: 700; }
.ts-table tfoot td {
    border-top: 2px solid var(--card-border); font-weight: 700; padding-top: 9px;
}
.ts-note { margin: 14px 0 0; font-size: 11px; color: var(--card-muted); line-height: 1.5; }

@media (pointer: coarse) {
    .dt-master { width: 132px; font-size: 13px; }
    .ts-table th, .ts-table td { padding: 10px; }
}

/* ---- board-wide timesheet report -------------------------------------------
   Wider and taller than the per-card timesheet: this one is a report to read down, so it gets
   most of the viewport and scrolls internally with the header pinned. */
.report-dialog {
    background: var(--card); color: var(--card-text);
    border-radius: 8px; width: min(940px, 96vw); max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 32px rgba(9, 30, 66, .5); padding: 18px 20px;
}
.rp-head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rp-head h3 { margin: 0; font-size: 16px; }
.rp-head .icon-btn { margin-left: auto; }

.rp-controls {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    margin: 14px 0; padding-bottom: 14px; flex: 0 0 auto;
    border-bottom: 1px solid var(--card-border);
}
.rp-date { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--card-muted); }
.rp-date input {
    padding: 6px 8px; font-size: 13px; font-family: inherit;
    border: 1px solid var(--toolbar-border); border-radius: 4px;
}
.rp-quick { display: flex; gap: 6px; }
.rp-quick .btn-plain {
    border: 1px solid var(--card-border); border-radius: 4px; padding: 6px 10px; font-size: 12px;
}
/* The active range is marked, so it is obvious which preset the dates correspond to - and
   equally obvious when they have been edited by hand and match none of them. */
.rp-quick .btn-plain.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.rp-export { margin-left: auto; text-decoration: none; border: 1px solid var(--card-border);
             border-radius: 4px; padding: 7px 12px; font-size: 13px; color: var(--card-text); }
.rp-export:hover { background: rgba(9, 30, 66, .06); }
.rp-export.disabled { opacity: .4; pointer-events: none; }

.rp-scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
.rp-loading, .rp-empty { color: var(--card-muted); font-size: 13px; padding: 20px 0; }

.rp-table thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
/* A column heading spans the grid and separates each block; the blank row before it comes
   from the margin rather than an empty <tr>, so the table stays valid. */
/* No background here: it is set inline from ReportPalette so the grid and the exported
   workbook use one list of colours. Everything else about the heading lives here. */
.rp-colhead th {
    color: #172b4d; font-size: 12px; font-weight: 700;
    text-align: left; padding: 8px 10px;
    border-top: 2px solid var(--card-border);
    border-bottom: 1px solid rgba(9, 30, 66, .12);
}
.rp-card { font-weight: 600; }
.rp-cardtotal td { background: rgba(9, 30, 66, .03); font-size: 12px; }
.rp-subtotal td {
    background: #eef2f6; font-weight: 700;
    border-top: 1px solid var(--card-border); border-bottom: 2px solid var(--card-border);
}
.rp-table tfoot td {
    position: sticky; bottom: 0; background: var(--card);
    border-top: 3px double var(--card-border); font-size: 14px;
}
.rp-note { margin: 12px 0 0; font-size: 11px; color: var(--card-muted); flex: 0 0 auto; }

@media (pointer: coarse) {
    .rp-quick .btn-plain, .rp-export { padding: 9px 12px; }
    .rp-date input { padding: 9px 8px; }
}

/* The live session clock on the running tray card. Tabular figures so the seconds do not
   jiggle the layout as they change, and visually subordinate to the banked total beside it -
   this number is provisional until it crosses the next quarter hour.

   It takes the auto margin that pushes the pair to the right, and .dt-time gives its own up
   when the clock is present - two auto margins in one flex row would split the free space
   between them and leave the clock stranded in the middle. The element is only rendered for
   the running card, so the sibling rule cannot fire when there is no clock. */
.dt-live {
    margin-left: auto;
    font-variant-numeric: tabular-nums; font-size: 11px;
    color: #4bce97;
}
.dt-live + .dt-time { margin-left: 0; }

/* ---- column reordering -----------------------------------------------------
   The header is the handle, so it gets the grab cursor; the rest of the column keeps its
   own behaviour for dragging cards out of it. */
.column > header { cursor: grab; }
.column > header:active { cursor: grabbing; }
/* The picker and any buttons in the header are controls, not handle. */
.column > header select, .column > header button { cursor: pointer; }

.column.col-dragging { opacity: .45; }
/* A bar down the left edge of the column the dragged one would land before - the board runs
   horizontally, so the indicator is vertical, mirroring the tray. */
.column.col-drop-before { box-shadow: -4px 0 0 0 var(--accent); }

/* ---- board tab images ------------------------------------------------------
   Sized to the tab's text, not the other way round: the image is an aid to recognising a
   tab at a glance, so it must not change the tab's height as boards gain and lose one. */
.tab-icon {
    width: 18px; height: 18px; border-radius: 3px; object-fit: cover;
    margin-right: 7px; vertical-align: -4px; flex: 0 0 auto;
    background: rgba(255, 255, 255, .12);
}

/* The upload chip in the board editor. The file input inside is hidden rather than removed,
   so the label still activates it and keyboard focus still reaches it. */
.be-icon {
    position: relative; overflow: hidden; cursor: pointer; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 4px;
    border: 1px dashed var(--toolbar-border);
    display: inline-flex; align-items: center; justify-content: center;
}
.be-icon:hover { border-color: var(--accent); }
.be-icon img { width: 100%; height: 100%; object-fit: cover; }
.be-icon-none { font-size: 14px; opacity: .6; }
.be-icon input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
    /* A wide font-size makes the whole chip the clickable region in every browser. */
    font-size: 100px;
}
.be-icon-clear { padding: 2px 6px; }

@media (pointer: coarse) {
    .be-icon { width: 36px; height: 36px; }
}

/* Time banked before today, on a tray card. Quieter than today's figure: it is context, not
   the number you are watching. */
.dt-prev {
    font-size: 10px; color: var(--card-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Whichever of the clock or the "prev" figure comes first takes the auto margin that pushes
   the group right; the ones after it sit alongside. */
.dt-live + .dt-prev, .dt-prev + .dt-time { margin-left: 0; }
.dt-prev { margin-left: auto; }
.dt-live { margin-left: auto; }
.dt-live ~ .dt-prev { margin-left: 0; }

/* The project chip in the card dialog: same shape as the others, outlined so it reads as a
   different axis from Priority and Value. */
.marker-chip.project { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); font-weight: 700; }

/* ---- On Break -------------------------------------------------------------
   Sits beside the tracking switch and matches its shape, because it is the same class of
   control. Amber rather than green: a break is a deliberate, temporary state you are meant
   to notice and undo, not a resting position. */
.dt-break {
    flex: 0 0 auto; width: 104px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: none; border-right: 1px solid rgba(255, 255, 255, .14);
    cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
    padding: 8px 6px; text-align: center; line-height: 1.25;
}
.dt-break.off { background: #2a2d31; color: #c9d1d9; }
.dt-break.on  { background: #4a3a12; color: #f5c518; }
.dt-break.off:hover { background: #34383d; }
.dt-break.on:hover  { background: #5c4816; }
.dt-break:disabled { opacity: .4; cursor: not-allowed; }
.dt-break-mark { font-size: 18px; line-height: 1; }
.dt-break:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The whole strip picks up the amber edge, so the state is readable without hunting. */
.day-tray:has(.dt-break.on) { border-top-color: #f5c518; }
.dt-break-note { color: #f5c518; font-weight: 600; }

/* A paused clock is dimmed and stops pulsing - it is not counting. */
.dt-live.paused { color: #f5c518; opacity: .8; }
.dt-card.running:has(.dt-live.paused) .dt-time { animation: none; }

@media (pointer: coarse) { .dt-break { width: 118px; font-size: 13px; } }

/* ---- wiki tabs ------------------------------------------------------------- */
.board-tab.wiki { border-bottom-color: #8b5cf6; }
.tab-doc { margin-right: 6px; opacity: .85; }
/* The second plus is labelled, not a bare "+": two identical plus signs side by side would
   be a guess as to which adds a board and which adds a page. */
.board-tab.add.wiki-add { border-bottom-color: #8b5cf6; letter-spacing: .5px; }

/* ---- wiki page ------------------------------------------------------------- */
/* .wiki-page, not .wiki: the tabs in the bar are `board-tab wiki`, so a bare `.wiki` rule
   matched them as well and gave every wiki tab this page's padding, margin, background and
   flex:1 - which made the tabs enormous, on the board as much as on the wiki. */
.wiki-page {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 20px 28px 28px; color: var(--card-text);
    background: var(--card); margin: 12px; border-radius: 8px;
}
.wiki-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.wiki-head h1 { margin: 0; font-size: 22px; }
.wiki-meta { font-size: 11px; color: var(--card-muted); }
.wiki-meta .saved { color: #4bce97; }
.wiki-actions { margin-left: auto; display: flex; gap: 8px; }

.wiki-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 6px; margin-bottom: 8px;
    background: rgba(9, 30, 66, .05); border: 1px solid var(--card-border); border-radius: 6px;
}
.wiki-toolbar button {
    min-width: 30px; height: 30px; padding: 0 8px;
    background: var(--card); color: var(--card-text);
    border: 1px solid var(--card-border); border-radius: 4px;
    cursor: pointer; font-size: 12px; font-family: inherit;
}
.wiki-toolbar button:hover { border-color: var(--accent); background: rgba(12, 102, 228, .08); }
.wiki-toolbar button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.wiki-toolbar .sep { width: 1px; height: 20px; background: var(--card-border); margin: 0 4px; }

/* Side by side when previewing, so you can see the result without losing your place. */
.wiki-edit { display: flex; gap: 12px; min-height: 380px; }
.wiki-edit.split > * { flex: 1 1 50%; min-width: 0; }
.wiki-source {
    flex: 1 1 auto; width: 100%; min-height: 380px; resize: vertical;
    padding: 12px; border: 1px solid var(--card-border); border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.6; color: var(--card-text); background: var(--card);
}
.wiki-source:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.wiki-preview { border: 1px dashed var(--card-border); border-radius: 6px; padding: 12px; overflow: auto; }
.wiki-hint { font-size: 11px; color: var(--card-muted); margin: 8px 0 0; }

/* Rendered Markdown. Sized for reading rather than for fitting a card. */
.wiki-body { font-size: 14px; line-height: 1.65; max-width: 78ch; }
.wiki-body.empty { color: var(--card-muted); cursor: text; }
.wiki-body h1, .wiki-body h2, .wiki-body h3 { margin: 1.4em 0 .5em; line-height: 1.3; }
.wiki-body h1 { font-size: 22px; border-bottom: 1px solid var(--card-border); padding-bottom: 6px; }
.wiki-body h2 { font-size: 18px; border-bottom: 1px solid var(--card-border); padding-bottom: 4px; }
.wiki-body h3 { font-size: 15px; }
.wiki-body p { margin: .7em 0; }
.wiki-body ul, .wiki-body ol { margin: .7em 0; padding-left: 1.6em; }
.wiki-body li { margin: .25em 0; }
.wiki-body a { color: var(--accent); }
.wiki-body code {
    background: rgba(9, 30, 66, .08); padding: 1px 5px; border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em;
}
.wiki-body pre {
    background: rgba(9, 30, 66, .08); padding: 12px; border-radius: 6px; overflow-x: auto;
}
.wiki-body pre code { background: none; padding: 0; }
.wiki-body blockquote {
    margin: .8em 0; padding: 2px 14px; border-left: 3px solid var(--accent);
    color: var(--card-muted);
}
.wiki-body table { border-collapse: collapse; margin: 1em 0; font-size: 13px; }
.wiki-body th, .wiki-body td { border: 1px solid var(--card-border); padding: 6px 10px; text-align: left; }
.wiki-body th { background: rgba(9, 30, 66, .06); }
.wiki-body hr { border: none; border-top: 1px solid var(--card-border); margin: 1.6em 0; }
.wiki-body img { max-width: 100%; }
.wiki-body input[type=checkbox] { margin-right: 6px; }

@media (max-width: 900px) { .wiki-edit.split { flex-direction: column; } }
@media (pointer: coarse) { .wiki-toolbar button { height: 36px; min-width: 36px; } }

/* ---- timesheet page --------------------------------------------------------
   Scoped under .ts-page so nothing here can reach the tab bar - the wiki page taught that
   lesson by styling every `.wiki` tab as a full-page container. */
.board-tab.sheet { border-bottom-color: #4bce97; }

.ts-page {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    margin: 12px; padding: 22px 26px 28px;
    background: var(--card); color: var(--card-text); border-radius: 8px;
}
.tsp-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.tsp-head h1 { margin: 0; font-size: 22px; }
.tsp-range { color: var(--card-muted); font-size: 13px; }
.tsp-export { margin-left: auto; text-decoration: none; border: 1px solid var(--card-border);
              border-radius: 4px; padding: 7px 12px; font-size: 13px; color: var(--card-text); }
.tsp-export:hover { background: rgba(9, 30, 66, .06); }
.tsp-export.disabled { opacity: .4; pointer-events: none; }

.tsp-controls {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--card-border);
}
.tsp-controls select {
    padding: 6px 8px; font-size: 13px; font-family: inherit;
    border: 1px solid var(--toolbar-border); border-radius: 4px; min-width: 170px;
}
.tsp-msg { color: var(--card-muted); font-size: 13px; padding: 24px 0; }

/* Headline figures. Big numbers, small labels - readable at a glance from across a desk. */
.tsp-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.tsp-stat {
    flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border: 1px solid var(--card-border); border-radius: 8px;
    background: rgba(9, 30, 66, .03);
}
.tsp-stat .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tsp-stat .k { font-size: 11px; color: var(--card-muted); text-transform: uppercase; letter-spacing: .05em; }

/* Hours per day. Scaled to the busiest day rather than a fixed 8h, so a quiet week still
   has visible bars instead of a row of stubs. */
.tsp-days { margin-bottom: 26px; }
.tsp-days h2 { font-size: 13px; margin: 0 0 10px; color: var(--card-muted);
               text-transform: uppercase; letter-spacing: .05em; }
.tsp-daybars { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding-bottom: 6px; }
.tsp-daybar { flex: 0 0 46px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tsp-daybar .bar-track {
    width: 100%; height: 84px; display: flex; align-items: flex-end;
    background: rgba(9, 30, 66, .05); border-radius: 4px;
}
.tsp-daybar .bar { width: 100%; background: var(--accent); border-radius: 4px; min-height: 3px; }
.tsp-daybar.weekend .bar { background: #8b5cf6; }
.tsp-daybar .bar-h { font-size: 10px; font-variant-numeric: tabular-nums; }
.tsp-daybar .bar-d { font-size: 10px; color: var(--card-muted); }
.tsp-daybar .bar-n { font-size: 11px; font-weight: 700; }

/* Project blocks. The coloured header is the same palette the Excel export uses. */
.tsp-project { border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.tsp-project > header { display: flex; align-items: baseline; gap: 12px; padding: 9px 14px; }
.tsp-project > header h3 { margin: 0; font-size: 14px; color: #172b4d; }
.tsp-ptotal { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: #172b4d; }

.tsp-day { border-top: 1px solid var(--card-border); }
.tsp-dayhead {
    display: flex; align-items: baseline; gap: 12px; padding: 7px 14px;
    background: rgba(9, 30, 66, .03); font-size: 13px;
}
.tsp-dayhead .d { font-weight: 600; }
.tsp-dayhead .h { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.tsp-cards { list-style: none; margin: 0; padding: 0; }
.tsp-cards li {
    display: flex; align-items: baseline; gap: 12px;
    padding: 6px 14px 6px 28px; font-size: 13px; border-top: 1px solid rgba(9, 30, 66, .06);
}
.tsp-cards .c { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsp-cards .b { color: var(--card-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tsp-cards .h { font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }

.tsp-grand {
    display: flex; align-items: baseline; gap: 12px; margin-top: 18px; padding-top: 14px;
    border-top: 3px double var(--card-border); font-size: 16px;
}
.tsp-grand strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.tsp-note { margin-top: 14px; font-size: 11px; color: var(--card-muted); line-height: 1.6; }

@media (pointer: coarse) {
    .tsp-controls select, .tsp-controls input { padding: 9px 8px; }
    .tsp-daybar { flex-basis: 54px; }
}

/* ---- pasting an image onto a card ------------------------------------------ */
.paste-status {
    margin: 0 18px 10px; padding: 7px 12px; border-radius: 4px;
    font-size: 12px; background: rgba(75, 206, 151, .14); color: #216e4e;
    border: 1px solid rgba(33, 110, 78, .3);
}
.paste-status.error {
    background: rgba(226, 72, 61, .12); color: #ae2e24; border-color: rgba(174, 46, 36, .35);
}
/* A quiet line rather than a drop zone: the paste works anywhere in the dialog, so a bordered
   target would suggest it only works inside the box. */
.attach-hint-row { padding-top: 4px; }
.attach-hint { margin: 0; font-size: 11px; color: var(--card-muted); }

/* ---- links in a card's notes ---- */
.dialog .desc a { color: var(--accent); overflow-wrap: anywhere; cursor: pointer; }
.note-links { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.note-link {
    display: flex; gap: 12px; align-items: flex-start; padding: 8px;
    border: 1px solid var(--card-border); border-radius: 8px;
}
/* The same 16:10 shape as a title screenshot: the top of a desktop-width page. */
.note-link-pic {
    flex: 0 0 200px; aspect-ratio: 16 / 10; display: block; overflow: hidden;
    border-radius: 6px; border: 1px solid var(--card-border); background: #f4f5f7;
}
.note-link-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.note-link-nopic {
    display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
    font-size: 11px; color: var(--card-muted);
}
.note-link-text { min-width: 0; flex: 1 1 auto; }
a.note-link-title {
    color: var(--accent); font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
a.note-link-title:hover { text-decoration: underline; }
.note-link-reason, .note-link-armed { margin: 6px 0 0; font-size: 12px; color: var(--card-muted); }
.note-link-armed { color: var(--card-text); font-weight: 600; }
.note-link-set { margin-top: 6px; padding-left: 0; font-size: 12px; color: var(--accent); }
.note-link-set:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 560px) {
    .note-link { flex-direction: column; }
    .note-link-pic { flex-basis: auto; width: 100%; }
}