: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;
    padding: 12px; 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;
}

.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); }

.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; }

/* ---- personal mode ---- */
.personal-toggle { gap: 8px; }
.personal-toggle > span:last-child { min-width: 58px; }

/* 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;
}
.personal { font-size: 12px; line-height: 1; }

/* ---- 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; }

/* 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; }