/* Graphite Internal Design System — slim variant for fileshare.
   Tokens, layout, buttons, cards, inputs, badges, tables, alerts. Dark default. */

:root {
  --n1:#FFFFFF;--n2:#FFF9EB;--n3:#989B9B;--n4:#606060;--n5:#333333;
  --n6:#1F1F1F;--n7:#161616;--n8:#000000;
  --wn1:#DDCFAC;--wn2:#C4BCAA;--wn3:#606060;
  --p1:#65FFAA;--p2:#42CA80;--p3:#2E8C59;
  --s1:#8FB5D9;--s2:#CEBCF4;--s3:#F5BC4E;--s6:#ED6958;
  --color-success:var(--p2);--color-success-subtle:#1a3d2b;
  --color-warning:var(--s3);--color-warning-subtle:#3d2f0d;
  --color-error:var(--s6);--color-error-subtle:#3d1a17;
  --color-info:var(--s1);--color-info-subtle:#1a2b3d;
  --surface-bg:var(--n8);--surface-base:var(--n7);--surface-raised:#1a1a1a;
  --surface-overlay:var(--n6);--surface-sunken:#0d0d0d;
  --surface-border:#2a2a2a;--surface-border-sub:#1e1e1e;
  --text-primary:var(--n1);--text-secondary:var(--wn2);--text-tertiary:var(--wn3);
  --text-disabled:#404040;--text-inverse:var(--n8);--text-brand:var(--p1);
  --interactive-primary:var(--p2);--interactive-primary-hover:var(--p1);
  --interactive-focus-ring:var(--p2);
  --font-sans:'IBM Plex Sans',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --text-xs:.625rem;--text-sm:.75rem;--text-base:.875rem;--text-md:1rem;
  --text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;
  --text-3xl:1.875rem;--text-4xl:2.25rem;
  --weight-light:300;--weight-regular:400;--weight-medium:500;
  --weight-semibold:600;--weight-bold:700;
  --leading-tight:1.2;--leading-snug:1.35;--leading-normal:1.5;
  --leading-relaxed:1.6;
  --tracking-tight:-.02em;--tracking-normal:0;--tracking-wide:.04em;
  --tracking-wider:.08em;--tracking-widest:.12em;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
  --space-16:64px;--space-20:80px;
  --radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;
  --radius-xl:12px;--radius-2xl:16px;--radius-full:9999px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.5),0 0 1px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  --shadow-focus:0 0 0 2px var(--interactive-focus-ring);
  --transition-fast:80ms ease;--transition-base:150ms ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);
  line-height:var(--leading-normal);color:var(--text-primary);background:var(--surface-bg);
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit}
code,pre,.mono{font-family:var(--font-mono)}

/* ── App nav ── */
.app-nav{
  display:flex;align-items:stretch;height:48px;background:var(--n8);
  border-bottom:1px solid var(--surface-border);padding:0 var(--space-5);gap:var(--space-1);
  width:100%;position:sticky;top:0;z-index:50;
}
.app-nav-logo{display:flex;align-items:center;padding-right:var(--space-5);flex-shrink:0;gap:var(--space-2)}
.app-nav-logo-mark{width:24px;height:24px;background:var(--p2);border-radius:var(--radius-sm);display:grid;place-items:center;font-family:var(--font-mono);font-weight:var(--weight-bold);color:var(--n8);font-size:13px}
.app-nav-logo-text{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-primary)}
.app-nav-items{display:flex;align-items:stretch;flex:1;gap:0}
.app-nav-item{
  display:flex;align-items:center;padding:0 var(--space-4);
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-tertiary);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  cursor:pointer;transition:color var(--transition-fast);white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;
}
.app-nav-item:hover{color:var(--text-secondary)}
.app-nav-item.active{color:var(--p2);border-bottom-color:var(--p2)}
.app-nav-right{display:flex;align-items:center;gap:var(--space-3);margin-left:auto;flex-shrink:0}
.app-nav-user{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)}

/* ── Page container ── */
.page{max-width:1080px;margin:0 auto;padding:var(--space-10) var(--space-6)}
.page--narrow{max-width:640px}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--surface-border)}
.page-title{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:var(--tracking-tight)}
.page-subtitle{font-size:var(--text-sm);color:var(--text-tertiary);margin-top:var(--space-2);font-family:var(--font-mono)}
.page-back{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-tertiary);text-decoration:none;margin-bottom:var(--space-6)}
.page-back:hover{color:var(--text-secondary)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-mono);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-lg);
  transition:background var(--transition-base),color var(--transition-base),
             border-color var(--transition-base),box-shadow var(--transition-base);
}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed;pointer-events:none}
.btn-sm{font-size:10px;padding:var(--space-1) var(--space-3);height:28px;border-radius:var(--radius-md)}
.btn-md{font-size:var(--text-xs);padding:var(--space-2) var(--space-5);height:36px}
.btn-lg{font-size:var(--text-sm);padding:var(--space-3) var(--space-8);height:44px;border-radius:var(--radius-xl)}
.btn-primary{background:var(--p2);color:var(--n8);border-color:var(--p2)}
.btn-primary:hover:not(:disabled){background:var(--p1);border-color:var(--p1);box-shadow:0 0 16px rgba(66,202,128,.3)}
.btn-secondary{background:var(--n7);color:var(--wn2);border-color:var(--surface-border)}
.btn-secondary:hover:not(:disabled){background:var(--surface-overlay);color:var(--text-primary);border-color:#3a3a3a}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.btn-ghost:hover:not(:disabled){background:var(--surface-overlay);color:var(--text-primary)}

/* ── Inputs ── */
.input-group{display:flex;flex-direction:column;gap:var(--space-2);width:100%}
.input-label{
  font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-secondary);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;font-family:var(--font-mono);
}
.input{
  width:100%;background:var(--surface-base);border:1px solid var(--surface-border);
  border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);
  font-size:var(--text-base);line-height:var(--leading-normal);
  padding:var(--space-2) var(--space-3);height:36px;
  transition:border-color var(--transition-base),box-shadow var(--transition-base);outline:none;
}
.input::placeholder{color:var(--text-tertiary)}
.input:focus{border-color:var(--p2);box-shadow:0 0 0 3px rgba(66,202,128,.12)}
.input[type="file"]{padding:6px var(--space-3);height:auto}
select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23989B9B'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:32px}

/* ── Cards ── */
.card{background:var(--surface-base);border:1px solid var(--surface-border);border-radius:var(--radius-xl);padding:var(--space-6)}
.card-elevated{background:var(--surface-raised);box-shadow:var(--shadow-md)}
.card-title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary)}
.card-subtitle{font-size:var(--text-sm);color:var(--text-tertiary);margin-top:var(--space-1)}
.card-body{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-mono);
  font-size:10px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;border-radius:var(--radius-full);
  padding:2px var(--space-2);line-height:1.6;white-space:nowrap;
}
.badge-neutral{background:var(--surface-overlay);color:var(--wn2)}
.badge-success{background:rgba(66,202,128,.12);color:var(--p2)}
.badge-warning{background:rgba(245,188,78,.12);color:var(--s3)}
.badge-error{background:rgba(237,105,88,.12);color:var(--s6)}
.badge-info{background:rgba(143,181,217,.12);color:var(--s1)}
button.badge{border:none;cursor:pointer;font-family:var(--font-mono);transition:filter var(--transition-fast),opacity var(--transition-fast)}
button.badge:hover:not(:disabled){filter:brightness(1.2)}
button.badge:disabled{opacity:.5;cursor:wait}

/* ── Project grid ── */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}
.project-card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface-base);border:1px solid var(--surface-border);border-radius:var(--radius-xl);padding:var(--space-5);transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.project-card:hover{border-color:#3a3a3a;box-shadow:var(--shadow-sm)}
.project-card-title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary)}
.project-card-meta{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-tertiary);word-break:break-all}
.project-card-actions{display:flex;gap:var(--space-2);margin-top:var(--space-2)}

/* ── Tables ── */
.table-wrap{border:1px solid var(--surface-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-base)}
.ds-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.ds-table thead{background:var(--surface-overlay)}
.ds-table th{
  padding:var(--space-2) var(--space-4);text-align:left;
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);
  color:var(--text-tertiary);letter-spacing:var(--tracking-wider);text-transform:uppercase;
  border-bottom:1px solid var(--surface-border);white-space:nowrap;
}
.ds-table td{padding:var(--space-3) var(--space-4);color:var(--text-secondary);border-bottom:1px solid var(--surface-border-sub)}
.ds-table tr:last-child td{border-bottom:none}
.ds-table tbody tr{transition:background var(--transition-fast)}
.ds-table tbody tr:hover{background:var(--surface-overlay)}
.ds-table .cell-mono{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-tertiary)}
.ds-table td:first-child,.ds-table th:first-child{padding-left:var(--space-5)}
.ds-table td:last-child,.ds-table th:last-child{padding-right:var(--space-5);text-align:right}

/* ── Alerts ── */
.alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid;font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.alert-info{background:var(--color-info-subtle);border-color:rgba(143,181,217,.25);color:var(--s1)}
.alert-success{background:var(--color-success-subtle);border-color:rgba(66,202,128,.25);color:var(--p2)}
.alert-warning{background:var(--color-warning-subtle);border-color:rgba(245,188,78,.25);color:var(--s3)}
.alert-error{background:var(--color-error-subtle);border-color:rgba(237,105,88,.25);color:var(--s6)}

/* ── Empty state ── */
.empty{
  background:var(--surface-base);border:1px dashed var(--surface-border);
  border-radius:var(--radius-xl);padding:var(--space-12);text-align:center;
  color:var(--text-tertiary);font-size:var(--text-sm);line-height:var(--leading-relaxed);
}
.empty a{color:var(--p2);text-decoration:none}
.empty a:hover{color:var(--p1)}

/* ── Utils ── */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}
.text-tertiary{color:var(--text-tertiary)}
.text-mono{font-family:var(--font-mono);font-size:var(--text-xs)}
.status-text{font-size:var(--text-sm);color:var(--text-tertiary);font-family:var(--font-mono);min-height:1.2em}
.status-text.error{color:var(--s6)}