/* Trabou · My workspace. Colours and type from docs/SPEC.md; pill/checkbox feel reused from docs/front-page.html. */
:root{
  --cream:#FFF8EC; --white:#FFFFFF;
  --turq:#06D6C4; --purple:#8338EC; --magenta:#FF3D7F; --orange:#FF8C42; --yellow:#FFD23F; --navy:#0E1A3A;
  --muted:#4A5470; --line:rgba(14,26,58,.10);
  --display:"Baloo 2",ui-rounded,system-ui,sans-serif;
  --body:"Figtree",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:16px/1.5 var(--body); color:var(--navy); min-height:100vh; padding:24px;
  background:
    radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(135deg,var(--navy),#2A1460 60%,var(--purple));
}
h1,h2,p{margin:0}
:focus-visible{outline:3px solid var(--purple); outline-offset:2px; border-radius:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; z-index:20; background:var(--yellow); color:var(--navy); padding:8px 12px; border-radius:10px; font-weight:700}
.skip:focus{left:8px}

/* app window */
.app{display:grid; grid-template-columns:260px 1fr; max-width:1280px; min-height:calc(100vh - 48px); margin:0 auto; border-radius:22px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}

/* sidebar */
.side{background:var(--cream); padding:20px 14px; border-right:1px solid var(--line)}
.side-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; color:inherit; text-decoration:none}
.brand picture{display:block; max-width:100%}
.brand-lockup{display:block; width:168px; height:auto; max-width:100%}
.brand-by{display:block; margin-left:56px; font-size:.72rem; line-height:1.2; color:var(--muted)}
.burger,.drawer-x,.backdrop{display:none}
.burger,.drawer-x{place-items:center; width:44px; height:44px; flex:none; border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--navy); font:700 1.25rem/1 var(--body); cursor:pointer; box-shadow:0 6px 16px -10px rgba(14,26,58,.6)}
.ws-name{font:700 1.05rem var(--display); margin:18px 8px 4px}
.side-label{font:700 .7rem var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:18px 8px 6px}
.side-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.side-item{width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:0; border-radius:12px; background:transparent; color:var(--navy); font:500 .95rem var(--body); text-align:left; cursor:pointer; transition:background-color .2s, box-shadow .2s}
.side-item:hover{background:rgba(6,214,196,.14)}
.side-item.active{background:var(--turq); font-weight:700; box-shadow:0 6px 16px -8px rgba(6,214,196,.9)}
.side-item .em{width:22px; text-align:center}

/* main */
.main{background:var(--white); padding:20px clamp(16px,4vw,44px) 110px; position:relative; min-width:0}
.main:focus{outline:none}
.topbar{display:flex; justify-content:flex-end}
.founders{font:800 .76rem var(--body); letter-spacing:.08em; padding:6px 12px; border-radius:99px; background:linear-gradient(90deg,var(--yellow),var(--orange)); color:var(--navy); box-shadow:0 6px 18px -8px rgba(255,140,66,.8)}

/* goal box: gradient border turquoise -> purple -> magenta */
.goal{display:flex; gap:10px; align-items:center; margin-top:14px; padding:8px 8px 8px 16px; border:2px solid transparent; border-radius:18px; background:linear-gradient(var(--white),var(--white)) padding-box, linear-gradient(90deg,var(--turq),var(--purple),var(--magenta)) border-box; transition:box-shadow .2s}
.goal:focus-within{box-shadow:0 0 0 4px rgba(131,56,236,.18)}
.goal input{flex:1; min-width:0; border:0; background:transparent; color:var(--navy); font:500 1rem var(--body); padding:8px 0}
.goal input::placeholder{color:var(--muted)}
.goal input:focus{outline:none}
.build{border:0; border-radius:12px; background:var(--purple); color:var(--white); font:700 .95rem var(--body); padding:10px 22px; cursor:pointer; transition:transform .2s, box-shadow .2s; box-shadow:0 8px 20px -10px rgba(131,56,236,.9)}
.build:hover{transform:translateY(-1px)}
.build:active{transform:scale(.96)}
.goal-note{min-height:1.4em; margin:6px 4px 0; font-size:.85rem; color:var(--muted)}

/* title + tabs */
.page-title{font:800 clamp(1.7rem,3.4vw,2.4rem)/1.1 var(--display); margin:16px 0 12px}
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.tab{border:1px solid var(--line); background:#F5F2EA; color:var(--navy); font:600 .88rem var(--body); padding:7px 16px; border-radius:99px; cursor:pointer; transition:background-color .2s, border-color .2s}
.tab:hover{border-color:rgba(131,56,236,.4)}
.tab[aria-selected="true"]{background:rgba(131,56,236,.12); border-color:var(--purple); color:#5B1FB8}

/* tasks */
.tasks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.task{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--white); cursor:pointer; transition:border-color .2s, box-shadow .2s}
.task:hover{border-color:rgba(6,214,196,.7); box-shadow:0 8px 20px -14px rgba(14,26,58,.4)}
.task input{appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:0; border:2px solid #7A8399; border-radius:6px; display:grid; place-items:center; cursor:pointer; transition:background-color .2s, border-color .2s}
.task input:checked{background:var(--turq); border-color:var(--turq)}
.task input:checked::after{content:""; width:5px; height:10px; border:solid var(--navy); border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px)}
.task .tx{flex:1; min-width:0}
.task.is-done .tx{text-decoration:line-through; color:var(--muted)}

/* owner pills */
.pill{flex:none; font:700 .74rem var(--body); padding:4px 11px; border-radius:99px; white-space:nowrap; border:2px solid transparent}
.pill.done{background:var(--turq); color:var(--navy)}
.pill.agent{background:var(--purple); color:var(--white)}
.pill.waiting{background:var(--magenta); color:var(--navy)}
.pill.you{background:var(--orange); color:var(--navy)}
.pill.next{background:var(--white); color:#04756B; border-color:var(--turq)}

/* cheer toast */
.cheer{position:fixed; right:44px; bottom:44px; z-index:10; font:700 1rem var(--display); padding:10px 18px; border-radius:99px; background:linear-gradient(90deg,var(--orange),var(--magenta)); color:var(--navy); box-shadow:0 14px 30px -12px rgba(14,26,58,.55)}
.cheer.pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.07)}100%{transform:none}}

/* starter workspaces gallery */
.gallery-search{width:100%; border:1px solid var(--line); border-radius:12px; background:#F5F2EA; color:var(--navy); font:500 .95rem var(--body); padding:10px 14px}
.gallery-search:focus-visible{background:var(--white)}
.gallery-grid{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.gcard{display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--white); transition:border-color .2s, box-shadow .2s}
.gcard:hover{border-color:rgba(6,214,196,.7); box-shadow:0 8px 20px -14px rgba(14,26,58,.4)}
.gcard-top{display:flex; align-items:center; gap:10px}
.gcard-top .em{font-size:1.5rem; line-height:1}
.gcard h2{flex:1; min-width:0; font:700 1.05rem/1.2 var(--display)}
.gcard p{flex:1; font-size:.86rem; color:var(--muted); overflow-wrap:anywhere}
.chip{flex:none; font:700 .7rem var(--body); padding:3px 9px; border-radius:99px}
.chip.free{background:rgba(6,214,196,.18); color:#04756B}
.chip.pro{background:linear-gradient(90deg,var(--yellow),var(--orange)); color:var(--navy)}
.use{align-self:flex-start; border:0; border-radius:10px; background:var(--purple); color:var(--white); font:700 .85rem var(--body); padding:8px 16px; cursor:pointer; transition:transform .2s; box-shadow:0 8px 20px -12px rgba(131,56,236,.9)}
.use:hover{transform:translateY(-1px)}
.use:active{transform:scale(.96)}
@media (max-width:760px){.gallery-grid{grid-template-columns:1fr}}

/* phone: sidebar becomes a slide-in drawer */
@media (max-width:760px){
  html,body{overflow-x:hidden}
  body{padding:0}
  .app{grid-template-columns:1fr; border-radius:0; min-height:100vh}
  .side{position:fixed; top:0; left:0; bottom:0; z-index:30; width:min(84vw,300px); overflow-y:auto; padding:14px 12px 24px; visibility:hidden; transform:translateX(-105%); transition:transform .25s ease, visibility .25s; box-shadow:12px 0 40px -16px rgba(0,0,0,.5)}
  .side.open{visibility:visible; transform:none}
  .backdrop{display:block; position:fixed; inset:0; z-index:25; background:rgba(14,26,58,.5)}
  .backdrop[hidden]{display:none}
  .burger,.drawer-x{display:inline-grid}
  .brand-lockup{width:148px}
  .brand-by{margin-left:49px}
  .topbar{align-items:center; justify-content:space-between; gap:8px}
  .founders{font-size:.64rem; padding:4px 10px}
  .main{padding:12px 14px 88px}
  .goal{gap:6px; padding:5px 5px 5px 12px}
  .build{padding:10px 14px}
  .tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}
  .task{flex-wrap:wrap; align-items:flex-start; gap:6px 10px; padding:12px}
  .task .tx{flex:1 1 calc(100% - 30px); overflow-wrap:anywhere}
  .task .pill{margin-left:30px}
  .cheer{right:12px; bottom:12px; max-width:calc(100vw - 24px); font-size:.85rem; padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition-duration:.01ms!important}
}