/* ============================================================
   My Workspace — base
   Design tokens, reset, and the controls every section reuses.
   Neutrals / type / shape are platform-wide; each section only
   changes its accent (set as --accent* on [data-mode]).
   ============================================================ */

:root{
  /* neutrals */
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#FBFBFC;
  --ink:#1B1E23;
  --muted:#6B7280;
  --faint:#9AA1AC;
  --hair:#EAECEF;
  --hair-2:#E1E4E8;
  --danger:#D2453F;
  --danger-tint:#FDEDEC;

  /* shape */
  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;
  --pill:999px;

  /* elevation */
  --sh-1:0 1px 2px rgba(20,26,38,.05), 0 1px 3px rgba(20,26,38,.05);
  --sh-2:0 2px 5px rgba(20,26,38,.045), 0 10px 24px rgba(20,26,38,.06);
  --sh-3:0 18px 44px rgba(20,26,38,.14);

  --ease:cubic-bezier(.2,.7,.2,1);
  --topbar-h:58px;

  /* accent — overwritten per section by Theme.apply() */
  --accent:#1B1E23;
  --accent-hover:#000000;
  --accent-tint:#EFF0F2;
  --accent-tint2:#E4E6E9;
  --accent-border:#D2D5DA;
  --accent-ink:#1B1E23;
  --accent-line:#9AA1AC;

  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
         "Helvetica Neue", sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.011em; }
h1{ font-size:22px; }
h2{ font-size:18px; }
h3{ font-size:15px; }
p{ margin:0; }

button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
a{ color:inherit; text-decoration:none; }

svg{ display:block; }
[hidden]{ display:none !important; }

::selection{ background:var(--accent-tint2); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* thin scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#DCDFE4; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#C6CAD1; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; padding:0 14px;
  border:1px solid var(--hair-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
  font-size:14px; font-weight:500; white-space:nowrap;
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover{ background:var(--surface-2); border-color:#D5D9DE; }
.btn:active{ transform:translateY(.5px); }
.btn svg{ width:16px; height:16px; flex:none; }

.btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }

.btn--ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.btn--ghost:hover{ background:var(--surface-2); color:var(--ink); border-color:transparent; }

.btn--danger{ color:var(--danger); border-color:#F0D5D3; background:var(--surface); }
.btn--danger:hover{ background:var(--danger-tint); border-color:#E8BEBB; }

.btn--sm{ height:30px; padding:0 10px; font-size:13px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ── Icon button ─────────────────────────────────────────── */
.icon-btn{
  display:inline-grid; place-items:center;
  width:32px; height:32px; flex:none;
  border-radius:var(--r-sm);
  color:var(--muted);
  transition:background .14s var(--ease), color .14s var(--ease);
}
.icon-btn:hover{ background:var(--hair); color:var(--ink); }
.icon-btn svg{ width:17px; height:17px; }
.icon-btn--sm{ width:26px; height:26px; }
.icon-btn--sm svg{ width:15px; height:15px; }
.icon-btn--danger:hover{ background:var(--danger-tint); color:var(--danger); }
.icon-btn--on{ background:var(--accent-tint); color:var(--accent-ink); }

/* ── Inputs ──────────────────────────────────────────────── */
.input,.textarea,.select{
  width:100%;
  padding:8px 11px;
  border:1px solid var(--hair-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
  font-size:14px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.input:focus,.textarea:focus,.select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
.textarea{ resize:vertical; min-height:76px; line-height:1.55; }
.select{
  appearance:none;
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:15px;
}

.field{ display:block; margin-bottom:14px; }
.field__label{
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:500; color:var(--muted);
}
.field__hint{ margin-top:6px; font-size:12.5px; color:var(--faint); }

/* ── Search ──────────────────────────────────────────────── */
.search{ position:relative; flex:1; min-width:0; max-width:300px; }
.search svg{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--faint); pointer-events:none;
}
.search .input{ padding-left:32px; height:36px; }

/* ── Chip / pill ─────────────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 9px;
  border-radius:var(--pill);
  background:var(--accent-tint); color:var(--accent-ink);
  font-size:12px; font-weight:500; white-space:nowrap;
}
.chip--muted{ background:var(--hair); color:var(--muted); }
.chip svg{ width:12px; height:12px; }

/* ── Segmented control (view switch) ─────────────────────── */
.seg{
  display:inline-flex; gap:2px; padding:2px;
  background:var(--hair); border-radius:var(--r-sm);
}
.seg button{
  display:grid; place-items:center;
  width:30px; height:28px; border-radius:7px;
  color:var(--muted);
  transition:background .14s var(--ease), color .14s var(--ease);
}
.seg button svg{ width:16px; height:16px; }
.seg button:hover{ color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }

/* ── Dropdown menu ───────────────────────────────────────── */
.menu{
  position:fixed; z-index:80;
  min-width:184px; padding:5px;
  background:var(--surface);
  border:1px solid var(--hair-2); border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  animation:menu-in .12s var(--ease);
}
@keyframes menu-in{ from{ opacity:0; transform:translateY(-3px) } }
.menu__item{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:7px 9px;
  border-radius:7px;
  font-size:14px; text-align:left; color:var(--ink);
}
.menu__item:hover{ background:var(--surface-2); }
.menu__item svg{ width:15px; height:15px; color:var(--muted); flex:none; }
.menu__item--danger{ color:var(--danger); }
.menu__item--danger svg{ color:var(--danger); }
.menu__item--danger:hover{ background:var(--danger-tint); }
.menu__item--on{ background:var(--accent-tint); color:var(--accent-ink); }
.menu__item--on svg{ color:var(--accent-ink); }
.menu__sep{ height:1px; margin:5px 4px; background:var(--hair); }
.menu__label{
  padding:6px 9px 4px; font-size:12px; font-weight:500; color:var(--faint);
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-host{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(20,26,38,.34);
  backdrop-filter:blur(2px);
  animation:fade .14s var(--ease);
}
@keyframes fade{ from{ opacity:0 } }
.modal{
  width:100%; max-width:440px;
  max-height:calc(100vh - 40px); overflow-y:auto;
  padding:20px;
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  animation:modal-in .18s var(--ease);
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(8px) scale(.985) } }
.modal--wide{ max-width:660px; }
.modal__title{ font-size:17px; font-weight:600; }
.modal__body{ margin-top:6px; font-size:14px; color:var(--muted); }
.modal__form{ margin-top:16px; }
.modal__foot{
  display:flex; justify-content:flex-end; gap:8px;
  margin-top:20px;
}

/* ── Toasts ──────────────────────────────────────────────── */
.toasts{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:120;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:12px;
  max-width:min(92vw,440px);
  padding:9px 10px 9px 14px;
  background:#22262D; color:#fff;
  border-radius:var(--pill);
  box-shadow:var(--sh-3);
  font-size:13.5px;
  pointer-events:auto;
  animation:toast-in .2s var(--ease);
}
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px) } }
.toast.is-out{ animation:toast-out .18s var(--ease) forwards; }
@keyframes toast-out{ to{ opacity:0; transform:translateY(6px) } }
.toast__msg{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast__action{
  flex:none; padding:3px 11px;
  border-radius:var(--pill);
  background:rgba(255,255,255,.15); color:#fff;
  font-size:13px; font-weight:500;
}
.toast__action:hover{ background:rgba(255,255,255,.26); }
.toast--danger{ background:#8E2E2A; }

/* ── Empty state ─────────────────────────────────────────── */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:64px 20px; text-align:center;
}
.empty__icon{
  display:grid; place-items:center;
  width:46px; height:46px; margin-bottom:10px;
  border-radius:var(--r-md);
  background:var(--accent-tint); color:var(--accent-ink);
}
.empty__icon svg{ width:21px; height:21px; }
.empty__title{ font-size:15px; font-weight:500; }
.empty__sub{ font-size:14px; color:var(--muted); }
.empty .btn{ margin-top:14px; }

/* ── Sign-in screen ──────────────────────────────────────── */
.auth{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:20px;
  background:var(--bg);
}
.auth__card{
  width:100%; max-width:344px;
  padding:28px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.auth__mark{
  width:36px; height:36px; margin-bottom:16px;
  border-radius:10px;
  background:#000 url("/assets/brand/logo.svg") center/cover no-repeat;
}
.auth__title{ font-size:19px; }
.auth__sub{ margin:3px 0 22px; font-size:14px; color:var(--muted); }
.auth__remember{
  display:flex; align-items:center; gap:8px;
  margin:-2px 0 18px;
  font-size:13.5px; color:var(--muted); cursor:pointer;
}
.auth__remember input{ width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }
.auth__error{
  margin:0 0 14px; padding:8px 11px;
  border-radius:var(--r-sm);
  background:var(--danger-tint); color:#9E322D;
  font-size:13.5px;
}
.auth .btn--primary{ background:var(--ink); border-color:var(--ink); height:40px; }
.auth .btn--primary:hover{ background:#000; border-color:#000; }

/* ── Drag & drop shared bits ─────────────────────────────── */
.drop-line{
  position:fixed; z-index:70;
  background:var(--accent); border-radius:2px;
  pointer-events:none;
}
.drag-ghost{
  position:fixed; z-index:71;
  pointer-events:none;
  opacity:.92;
  box-shadow:var(--sh-3);
  transform-origin:center;
}
.is-dragging{ opacity:.32; }
[draggable="true"]{ -webkit-user-drag:element; }
.drag-handle{ cursor:grab; touch-action:none; }
.drag-handle:active{ cursor:grabbing; }

/* ── Utility ─────────────────────────────────────────────── */
.spacer{ flex:1; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.trunc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Touch devices never fire :hover, so anything revealed on hover would be
   unreachable. Show those controls permanently instead. */
@media (hover:none){
  .proj__menu-btn,
  .row__menu-btn,
  .sk-file__menu,
  .grp__tools,
  .idea__del,
  .sb-card__tools,
  .sb-media__tools,
  .sb-conn__ins,
  .wf-card__tools,
  .wf-note-add,
  .wf-note__del,
  .wb-item__tools,
  .wb-item__grip{
    opacity:1;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}