/* ============================================================
   My Workspace — shell
   Top bar · dashboard · shared gallery (grid/list) · settings
   ============================================================ */

/* The shell owns the viewport height; each route scrolls inside it,
   so editor toolbars stay put and only the board/list scrolls. */
.app{ height:100vh; display:flex; flex-direction:column; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:10px;
  height:var(--topbar-h); padding:0 18px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hair);
}
.brand{
  display:flex; align-items:center; gap:9px;
  padding:5px 8px 5px 5px; margin-left:-5px;
  border-radius:var(--r-sm);
  transition:background .14s var(--ease);
}
.brand:hover{ background:var(--hair); }
.brand__mark{
  width:22px; height:22px; flex:none;
  border-radius:6px;
  background:#000 url("/assets/brand/logo.svg") center/cover no-repeat;
}
.brand__text{ font-size:15px; font-weight:600; letter-spacing:-.012em; }
.topbar__actions{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.whoami{
  margin-right:8px; padding-right:10px;
  border-right:1px solid var(--hair);
  font-size:13px; color:var(--muted);
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:640px){ .whoami{ display:none; } }

.main{ flex:1; display:flex; min-height:0; }
.view{
  flex:1; min-width:0; min-height:0;
  display:flex; flex-direction:column;
  overflow:hidden;             /* editors provide their own scrollers */
}
.view--scroll{ overflow-y:auto; }   /* dashboard / galleries / settings */

/* Shared page frame */
.page{
  width:100%; max-width:1180px; margin:0 auto;
  padding:34px 22px 72px;
}
.page--flush{ max-width:none; padding:0; flex:1; display:flex; flex-direction:column; min-height:0; }

/* ── Dashboard ───────────────────────────────────────────── */
.dash__welcome{ margin-bottom:2px; font-size:24px; letter-spacing:-.018em; }
.dash__sub{ margin-bottom:26px; font-size:15px; color:var(--muted); }

.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(228px,1fr));
  gap:14px;
}
.tile{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:18px;
  min-height:150px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  text-align:left;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-2);
  border-color:var(--tile-border,var(--hair-2));
}
.tile__icon{
  display:grid; place-items:center;
  width:38px; height:38px; margin-bottom:14px;
  border-radius:11px;
  background:var(--tile-tint); color:var(--tile-accent);
}
.tile__icon svg{ width:19px; height:19px; }
.tile__name{ font-size:15px; font-weight:600; }
.tile__desc{ margin-top:3px; font-size:13.5px; color:var(--muted); line-height:1.45; }
.tile__count{
  margin-top:auto; padding-top:14px;
  font-size:12.5px; color:var(--faint);
}
.tile__count b{ color:var(--tile-accent); font-weight:600; }

/* ── Section gallery ─────────────────────────────────────── */
.gal__bar{
  display:flex; align-items:center; gap:10px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.gal__back{
  display:inline-grid; place-items:center;
  width:32px; height:32px; flex:none;
  margin-left:-4px;
  border-radius:var(--r-sm);
  color:var(--muted);
  transition:background .14s var(--ease), color .14s var(--ease);
}
.gal__back:hover{ background:var(--hair); color:var(--ink); }
.gal__back svg{ width:18px; height:18px; }
.gal__heading{ display:flex; align-items:baseline; gap:9px; min-width:0; }
.gal__title{ font-size:20px; letter-spacing:-.015em; }
.gal__n{ font-size:13.5px; color:var(--faint); }
.gal__tools{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Grid of project cards */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(212px,1fr));
  gap:14px;
}

.proj{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  text-align:left;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.proj:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--accent-border); }

.thumb{
  position:relative;
  aspect-ratio:16/10;
  display:grid; place-items:center;
  background:var(--accent-tint);
  background-image:radial-gradient(120% 90% at 50% 0%, var(--accent-tint) 0%, var(--surface-2) 100%);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb__ph{ color:var(--accent-border); }
.thumb__ph svg{ width:30px; height:30px; }
.thumb__count{
  position:absolute; right:8px; bottom:8px;
  height:21px; padding:0 8px;
  display:inline-flex; align-items:center;
  border-radius:var(--pill);
  background:rgba(255,255,255,.92);
  border:1px solid var(--hair);
  font-size:11.5px; font-weight:500; color:var(--muted);
  backdrop-filter:blur(4px);
}
.proj__body{ padding:11px 12px 13px; }
.proj__title{ font-size:14px; font-weight:600; letter-spacing:-.008em; }
.proj__meta{ margin-top:2px; font-size:12.5px; color:var(--faint); }
.proj__menu-btn{
  position:absolute; top:7px; right:7px;
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:7px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--hair);
  color:var(--muted);
  opacity:0;
  transition:opacity .14s var(--ease), background .14s var(--ease);
}
.proj__menu-btn svg{ width:15px; height:15px; }
.proj:hover .proj__menu-btn,
.proj__menu-btn:focus-visible,
.proj__menu-btn[aria-expanded="true"]{ opacity:1; }
.proj__menu-btn:hover{ background:#fff; color:var(--ink); }

/* "New" tile */
.proj--new{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; min-height:170px;
  background:transparent;
  border:1px dashed var(--hair-2);
  box-shadow:none;
  color:var(--muted);
  font-size:14px; font-weight:500;
}
.proj--new:hover{
  background:var(--accent-tint);
  border-color:var(--accent-border);
  border-style:dashed;
  color:var(--accent-ink);
  transform:none;
  box-shadow:none;
}
.proj--new svg{ width:20px; height:20px; }

/* List view */
.list{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
}
.row{
  position:relative;
  display:flex; align-items:center; gap:12px;
  width:100%; padding:11px 12px;
  border-bottom:1px solid var(--hair);
  text-align:left;
  transition:background .14s var(--ease);
}
.row:last-child{ border-bottom:0; }
.row:hover{ background:var(--surface-2); }
.row__icon{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:9px;
  background:var(--accent-tint); color:var(--accent-ink);
  overflow:hidden;
}
.row__icon svg{ width:16px; height:16px; }
.row__icon img{ width:100%; height:100%; object-fit:cover; }
.row__main{ display:block; min-width:0; flex:1; }
.row__title{ display:block; font-size:14px; font-weight:500; }
.row__meta{ display:block; font-size:12.5px; color:var(--faint); }
.row__side{ display:flex; align-items:center; gap:6px; flex:none; }
.row__menu-btn{ opacity:0; }
.row:hover .row__menu-btn,
.row__menu-btn:focus-visible,
.row__menu-btn[aria-expanded="true"]{ opacity:1; }

/* ── Settings ────────────────────────────────────────────── */
.set__group{
  margin-bottom:14px; padding:18px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.set__group h2{ font-size:15px; margin-bottom:3px; }
.set__group > p{ font-size:13.5px; color:var(--muted); margin-bottom:16px; }

.set__row{
  display:flex; align-items:center; gap:12px;
  padding:11px 0;
  border-top:1px solid var(--hair);
}
.set__row:first-of-type{ border-top:0; padding-top:0; }
.set__row-main{ display:block; min-width:0; flex:1; }
.set__row-title{ display:block; font-size:14px; font-weight:500; }
.set__row-sub{ display:block; font-size:12.5px; color:var(--faint); }
.set__row-side{ display:flex; align-items:center; gap:8px; flex:none; }

.swatch{
  width:26px; height:26px; flex:none;
  padding:0; border:1px solid var(--hair-2); border-radius:8px;
  background:none; cursor:pointer;
  overflow:hidden;
}
.swatch::-webkit-color-swatch-wrapper{ padding:0; }
.swatch::-webkit-color-swatch{ border:0; border-radius:6px; }

.meter{ margin-top:4px; }
.meter__bar{
  height:6px; border-radius:99px; background:var(--hair); overflow:hidden;
}
.meter__fill{
  height:100%; border-radius:99px;
  background:var(--ink);
  transition:width .3s var(--ease), background .3s var(--ease);
}
.meter__fill.is-warn{ background:#D98324; }
.meter__fill.is-full{ background:var(--danger); }
.meter__text{ margin-top:6px; font-size:12.5px; color:var(--faint); }

/* ── Editor shells (used by every section editor) ────────── */
.editor{ flex:1; display:flex; flex-direction:column; min-height:0; }
.ed-bar{
  display:flex; align-items:center; gap:10px;
  padding:11px 18px;
  background:var(--surface);
  border-bottom:1px solid var(--hair);
  flex-wrap:wrap;
}
.ed-bar__glyph{
  display:grid; place-items:center;
  width:28px; height:28px; flex:none;
  border-radius:8px;
  background:var(--accent-tint); color:var(--accent-ink);
}
.ed-bar__glyph svg{ width:15px; height:15px; }
.title-input{
  min-width:120px; max-width:420px; flex:1;
  padding:5px 8px; margin-left:-8px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent;
  font-size:16px; font-weight:600; letter-spacing:-.012em;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.title-input:hover{ background:var(--surface-2); }
.title-input:focus{
  outline:none; background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
.ed-bar__actions{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.save-state{ font-size:12.5px; color:var(--faint); white-space:nowrap; }
.save-state.is-saving{ color:var(--accent-ink); }

@media (max-width:640px){
  .page{ padding:22px 14px 60px; }
  .dash__welcome{ font-size:21px; }
  .tiles{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:11px; }
  .tile{ min-height:132px; padding:14px; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(146px,1fr)); gap:11px; }
  .topbar{ padding:0 12px; }
  .gal__tools{ width:100%; margin-left:0; }
  .search{ max-width:none; }

  /* Team rows: the section chips would otherwise push the member's name
     off-screen, so drop them onto their own line under the name. */
  .row--team{ flex-wrap:wrap; position:relative; padding-right:44px; }
  .row--team .row__side{
    flex:1 0 100%;
    margin-top:7px; padding-left:46px;
    justify-content:flex-start;
  }
  .row--team .row__side > span[style]{ justify-content:flex-start !important; }
  .row--team .row__menu-btn{
    position:absolute; top:10px; right:8px;
    opacity:1;
  }

  /* keep the editor toolbar to two rows: title, then actions */
  .ed-bar{ padding:8px 12px; gap:8px; }
  .ed-bar__glyph{ display:none; }
  .save-state{ display:none; }        /* autosave is implicit on small screens */
  .ed-bar__actions{ gap:6px; flex-wrap:nowrap; }
  .ed-bar .btn{ height:32px; padding:0 10px; font-size:13px; gap:5px; }
  .ed-bar .btn svg{ width:15px; height:15px; }
  .title-input{ font-size:15px; }
}