/* Miriel TaskBoard v0.7.6 — crystal glass UI.
   The accepted emerald/gold artwork is the real backdrop. */

:root {
  --glass-bg-image: url("/assets/taskboard-glass-bg.webp");
  --glass-base: 10, 22, 21;
  --glass-surface: rgba(var(--glass-base), .28);
  --glass-border: rgba(221, 255, 243, .16);
  --glass-border-strong: rgba(226, 255, 246, .28);
  --glass-edge: rgba(255, 255, 255, .20);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, .26), 0 2px 8px rgba(0, 0, 0, .12);
  --glass-shadow-soft: 0 10px 28px rgba(0, 0, 0, .18), 0 2px 7px rgba(0, 0, 0, .10);
  --glass-green: 19, 121, 82;
}

html { background: #07100e; }

body,
.login-body {
  background-color: #07100e;
  background-image:
    linear-gradient(180deg, rgba(2, 8, 7, .24), rgba(3, 9, 8, .42)),
    radial-gradient(900px 620px at 52% 42%, rgba(5, 18, 16, .04), rgba(3, 10, 9, .30) 76%),
    var(--glass-bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.workspace,
.page,
#board-shell { background: transparent !important; }

.assistant-sidebar,
.topbar,
.column,
dialog,
.side-section,
.comment,
.attachment,
.import-preview,
.help-flow > div,
.chatgpt-handoff,
.more-menu-popover,
.task-actions-panel,
.account-menu-popover,
.activity-panel,
.activity-item,
.activity-missed-popup,
.toast,
.assistant-card,
.empty-state,
.login-shell {
  border-color: var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.16),
    var(--glass-shadow-soft);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.assistant-sidebar {
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.010) 28%, transparent 62%),
    rgba(7,18,16,.30);
  border-right-color: rgba(225,255,245,.18);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.075), 14px 0 42px rgba(0,0,0,.10);
}

.topbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.014) 48%, rgba(2,8,7,.04)),
    rgba(7,18,16,.27);
  border-bottom-color: rgba(225,255,245,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 14px 40px rgba(0,0,0,.13);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
}

.button,
.more-menu-trigger,
.task-actions-trigger,
.account-menu-trigger,
.tag-filter,
.activity-tab {
  border-color: rgba(226,255,246,.17);
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.022) 46%, rgba(255,255,255,.010)),
    rgba(8,22,20,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.21),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 7px 18px rgba(0,0,0,.11);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.button.secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.018) 48%, rgba(255,255,255,.008)),
    rgba(7,20,19,.22);
}

.button.primary {
  border-color: rgba(109,224,153,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 44%, rgba(255,255,255,.006)),
    rgba(var(--glass-green), .34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(2,35,20,.20),
    0 8px 22px rgba(4,61,37,.17);
}

.button:hover:not(:disabled),
.more-menu-trigger:hover,
.task-actions-trigger:hover,
.account-menu-trigger:hover,
.tag-filter:hover,
.activity-tab:hover {
  border-color: rgba(228,255,247,.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.036) 48%, rgba(255,255,255,.012)),
    rgba(13,31,28,.34);
}

.button.primary:hover:not(:disabled) {
  border-color: rgba(115,238,166,.50);
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.035) 46%, rgba(255,255,255,.009)),
    rgba(var(--glass-green), .44);
}

select,
input,
textarea,
.task-search {
  border-color: rgba(221,255,243,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    rgba(4,14,13,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075);
  backdrop-filter: blur(17px) saturate(138%);
  -webkit-backdrop-filter: blur(17px) saturate(138%);
}

select:hover,
input:hover,
textarea:hover,
.task-search:hover { border-color: rgba(225,255,245,.27); }

select:focus,
input:focus,
textarea:focus {
  border-color: rgba(99,212,146,.60);
  box-shadow: 0 0 0 3px rgba(45,177,108,.12), inset 0 1px 0 rgba(255,255,255,.10);
}

.column {
  background:
    linear-gradient(150deg, rgba(255,255,255,.060), rgba(255,255,255,.010) 26%, rgba(255,255,255,.002) 58%),
    rgba(4,15,14,.22);
  border-color: rgba(224,255,245,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 1px 0 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 18px 40px rgba(0,0,0,.15);
  backdrop-filter: blur(20px) saturate(142%);
  -webkit-backdrop-filter: blur(20px) saturate(142%);
}

.column.drag-over {
  border-color: rgba(109,224,153,.48);
  background:
    linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.012) 30%, transparent 64%),
    rgba(11,49,33,.28);
}

.task-card {
  /* v0.7.7: do not make the grid item a scroll-container.
     overflow:hidden collapses the automatic grid min-size and lets many cards
     squeeze into the column instead of overflowing .task-list. */
  overflow: visible;
  border-color: rgba(226,255,246,.18);
  background:
    linear-gradient(140deg, rgba(255,255,255,.115), rgba(255,255,255,.024) 24%, rgba(255,255,255,.006) 55%, rgba(255,255,255,.028)),
    rgba(7,22,20,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 1px 0 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 10px 25px rgba(0,0,0,.15);
}


.task-card:hover {
  border-color: rgba(232,255,248,.31);
  background:
    linear-gradient(140deg, rgba(255,255,255,.15), rgba(255,255,255,.032) 24%, rgba(255,255,255,.009) 55%, rgba(255,255,255,.036)),
    rgba(9,28,25,.31);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 1px 0 0 rgba(255,255,255,.09),
    0 16px 34px rgba(0,0,0,.19);
}

.task-ref-small,
.task-tag,
.column-count,
.meta-chip {
  border-color: rgba(225,255,245,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.008)),
    rgba(3,13,12,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

dialog {
  border-color: rgba(228,255,247,.20);
  background:
    linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.012) 29%, transparent 62%),
    rgba(4,15,14,.39);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.06),
    0 32px 90px rgba(0,0,0,.42);
  backdrop-filter: blur(34px) saturate(150%);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
}

dialog::backdrop {
  background: rgba(1,6,5,.42);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
}

.side-section,
.comment,
.attachment,
.import-preview,
.help-flow > div,
.chatgpt-handoff {
  border-color: rgba(224,255,245,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.009) 35%, transparent 68%),
    rgba(5,17,16,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.08);
  backdrop-filter: blur(18px) saturate(142%);
  -webkit-backdrop-filter: blur(18px) saturate(142%);
}

.task-dialog-actions {
  border-top-color: rgba(224,255,245,.14);
  background: rgba(3,13,12,.24);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.more-menu-popover,
.task-actions-panel,
.account-menu-popover,
.activity-missed-popup,
.toast {
  border-color: rgba(229,255,248,.20);
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.014) 30%, transparent 66%),
    rgba(3,14,13,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), var(--glass-shadow);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
}

.account-menu[open] .account-menu-trigger,
.more-menu[open] .more-menu-trigger,
.task-actions-inline[open] .task-actions-trigger {
  border-color: rgba(112,226,158,.38);
  background: rgba(9,35,26,.28);
}

.activity-backdrop {
  background: rgba(1,6,5,.20);
  backdrop-filter: blur(3px) saturate(110%);
  -webkit-backdrop-filter: blur(3px) saturate(110%);
}

.activity-panel {
  border-left-color: rgba(228,255,247,.18);
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.010) 28%, transparent 66%),
    rgba(3,14,13,.34);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.07), -24px 0 58px rgba(0,0,0,.25);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
}

.activity-item {
  border-color: rgba(225,255,245,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.008) 34%, transparent 68%),
    rgba(5,18,16,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.activity-item.unread {
  border-color: rgba(111,224,153,.32);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.010) 34%, transparent 68%),
    rgba(8,48,31,.25);
}

.activity-panel-footer {
  border-top-color: rgba(225,255,245,.13);
  background: rgba(2,11,10,.24);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.assistant-portrait,
.assistant-card,
.empty-state,
.login-shell {
  border-color: rgba(228,255,247,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--glass-shadow-soft);
}

.assistant-portrait {
  background:
    radial-gradient(circle at 50% 28%, rgba(130,212,145,.11), transparent 42%),
    rgba(4,17,14,.20);
  backdrop-filter: blur(18px) saturate(142%);
  -webkit-backdrop-filter: blur(18px) saturate(142%);
}

.assistant-card {
  background:
    linear-gradient(145deg, rgba(255,236,165,.075), rgba(255,255,255,.012) 38%, transparent 70%),
    rgba(6,22,17,.24);
}

.empty-state {
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.010)),
    rgba(4,16,15,.26);
}

.login-shell {
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.014) 30%, transparent 66%),
    rgba(4,16,14,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 30px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(34px) saturate(150%);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
}

.login-card { background: transparent; }

.account-strip #readiness,
.badge {
  border-color: rgba(118,221,151,.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.008)),
    rgba(6,29,20,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .task-card,
  .account-menu-trigger { transition: none !important; }
}

@media (max-width: 820px) {
  body,
  .login-body { background-attachment: scroll; }

  .topbar,
  .assistant-sidebar,
  dialog,
  .activity-panel,
  .login-shell {
    backdrop-filter: blur(20px) saturate(138%);
    -webkit-backdrop-filter: blur(20px) saturate(138%);
  }
}


/* v0.7.7 — Kanban scrolling regression guard.
   Every auto-created grid row keeps its content height, so .task-list remains
   the independent vertical scroller regardless of future card effects. */
.task-list {
  grid-auto-rows: max-content;
  align-content: start;
}

.task-card {
  align-self: start;
}

/* v0.7.10 — compositor seam guard.
   Chromium can show a vertical raster-tile seam when many translucent grid
   cards each own their own backdrop-filter/compositing surface.
   The column remains the real blurred glass plane; cards are transparent
   gemstone panes above it. */
.task-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-clip: padding-box;
}