:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d; --color-surface-3: #262422;
  --color-text: #cdccca; --color-text-muted: #979590; --color-primary: #4f98a3; --color-primary-hover: #227f8b;
  --radius-sm: 0.375rem; --radius-md: 0.65rem; --radius-xl: 1rem;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --font-body: 'General Sans', Inter, sans-serif; --content: 78rem; --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;background:var(--color-bg);color:var(--color-text)}
a,button{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),transform var(--transition-interactive),box-shadow var(--transition-interactive),opacity var(--transition-interactive)}
a{text-decoration:none;color:inherit} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
.shell{width:min(calc(100% - 2rem),var(--content));margin:0 auto}
header{padding:var(--space-5) 0 var(--space-8)}
.tabs{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.tab-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-4);border:1px solid oklch(from var(--color-text) l c h / 0.12);border-radius:9999px;background:transparent;font-size:var(--text-sm);font-weight:600}
.tab-btn[aria-selected="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#f9f8f4}
main{padding:0 0 var(--space-16)}
.layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(22rem,0.85fr);gap:var(--space-6);align-items:start}
.left-pane{display:grid;gap:var(--space-6)}
.category{display:grid;gap:var(--space-4)}
.category h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted)}
.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-4)}
.item-btn{display:grid;gap:var(--space-2);width:100%;text-align:left;padding:var(--space-4);border-radius:var(--radius-xl);background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.12);box-shadow:var(--shadow-sm)}
.item-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.item-btn[aria-selected="true"]{background:var(--color-surface-3);border-color:var(--color-primary)}
.item-meta{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted)}
.item-title{font-size:var(--text-base);font-weight:600;line-height:1.2}
.item-sub{font-size:var(--text-sm);color:var(--color-text-muted)}
.detail{position:sticky;top:var(--space-6);display:grid;gap:var(--space-5);padding:var(--space-6);border-radius:var(--radius-xl);border:1px solid oklch(from var(--color-text) l c h / 0.12);box-shadow:var(--shadow-sm);overflow:hidden;transition:background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease, opacity 280ms ease}
.detail::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));pointer-events:none}
.detail > *{position:relative;z-index:1}
.detail h3{font-size:var(--text-xl);line-height:1.05;letter-spacing:-.03em}
.detail p{color:var(--color-text-muted)}
.detail .detail-meta{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted)}
.detail-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.detail-status{display:inline-flex;align-items:center;gap:var(--space-2);padding:.15rem .6rem .15rem .4rem;border-radius:9999px;background:rgb(255 255 255 / 0.08);color:var(--color-text);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;flex:0 0 auto}
.detail-status svg{width:1rem;height:1rem;flex:0 0 auto}
.detail-status[data-status="proposed"]{color:#7fa8d9}
.detail-status[data-status="pp"]{color:#d9b85c}
.detail-status[data-status="planning"]{color:#7fa8d9}
.detail-status[data-status="wip"]{color:#d9b85c}
.detail-status[data-status="pr"]{color:#d9b85c}
.detail-status[data-status="onhold"]{color:#d9b85c}
.detail-status[data-status="finished"]{color:#7ad17a}
.detail-status[data-status="archived"]{color:var(--color-text-muted)}
.detail-status[data-status="mothball"]{color:var(--color-text-muted)}
.detail-status[data-status="blocked"]{color:var(--color-text-muted)}
.detail-status[data-status="cancel"]{color:#d97f7f}
.detail-head{display:flex;align-items:center;gap:var(--space-3)}
.detail-icon{display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;color:var(--color-text);flex:0 0 auto;border-radius:9999px;background:rgb(255 255 255 / 0.06)}
.detail-icon svg{width:1.4rem;height:1.4rem}
.detail-link{display:inline-flex;align-items:center;gap:var(--space-2);width:max-content;min-height:44px;padding:0 var(--space-4);border-radius:9999px;background:var(--color-primary);color:#f9f8f4;font-size:var(--text-sm);font-weight:600}
.detail-link:hover{background:var(--color-primary-hover)}
.detail-link.secondary{background:transparent;color:var(--color-text);border:1px solid oklch(from var(--color-text) l c h / 0.12)}
.detail-link.secondary:hover{background:var(--color-surface-2)}
footer{padding:var(--space-10) 0 var(--space-6);font-size:var(--text-xs);color:var(--color-text-muted)}
@media (max-width: 900px){.layout{grid-template-columns:1fr}.detail{position:static}}