/* ============ TOKENS — marka HS Budownictwo ============ */
:root{
  /* wysoki kontrast: biel / prawie-czerń, bez rozjaśnionych szarości na tekst */
  --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F2F2; --surface-3:#EAEAEA;
  --ink:#0A0A0A; --ink-muted:#3A3A3A; --ink-faint:#5C5C5C; --ink-placeholder:#8A8A8A;
  --line:#CACACA; --line-strong:#0A0A0A; --line-soft:#DCDCDC;
  /* czerwień z logo — jedyny nasycony akcent marki */
  --accent:#ED1C24; --accent-hover:#C81017; --accent-ink:#FFFFFF; --accent-soft:#FDE4E5;
  /* czerń — domyślne wypełnione przyciski, nagłówek, logo */
  --structure:#0A0A0A; --structure-2:#2A2A2A; --structure-ink:#FFFFFF; --structure-ink-muted:#B8B8B8;
  /* status — ciemny tekst na wyraźnym, jasnym tle + widoczna obwódka */
  --ok:#1B5E30; --ok-soft:#E3F5E7; --ok-line:#1B5E30;
  --warn:#7A4E00; --warn-soft:#FFF1D6; --warn-line:#7A4E00;
  --danger:#8B1E1E; --danger-soft:#FBE2E1; --danger-line:#8B1E1E;
  --info:#2A2A2A; --info-soft:#EDEDED; --info-line:#8A8A8A;
  --tag-pink:#7A1250; --tag-pink-soft:#FBE4F1;
  --tag-violet:#3D1E7A; --tag-violet-soft:#EBE3FA;
  --tag-orange:#8A3D00; --tag-orange-soft:#FDE9D6;
  --radius-s:0px; --radius-m:0px; --radius-l:0px; --radius-float:0px; --radius-pill:0px; --radius-feature:0px;
  --shadow-1:0 1px 2px rgba(0,0,0,.08);
  --shadow-float:0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 8px 28px rgba(0,0,0,.18);
  --shadow-glow:0 0 0 1px rgba(0,0,0,.04);
  --font-display:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-serif:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --maxw:680px;
  color-scheme: light;
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5; font-weight:400; letter-spacing:-.16px;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; margin:0; text-wrap:balance;}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:16px;}
a{color:inherit; text-decoration:none;}
.tabular{font-variant-numeric:tabular-nums;}
.serif{font-family:var(--font-serif); font-weight:400; font-style:normal;}
.serif em{font-style:italic;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:0;}
[hidden]{display:none!important;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important;} }

/* ============ APP SHELL ============ */
.app{max-width:var(--maxw); margin:0 auto; min-height:100vh; background:var(--paper); position:relative; display:flex; flex-direction:column;}
/* Ekran logowania zostaje wąski (typowa karta logowania) — reszta appki
   (po zalogowaniu) ma wypełniać całe okno przeglądarki, nie tylko środkowe
   ~50% na szerokim monitorze (zgłoszone 2026-09-15: "+/-25% szerokości
   monitora" pustego marginesu po obu stronach). base.html dokłada tę klasę
   tylko, gdy `uzytkownik` jest zalogowany. */
.app.app--wide{max-width:none;}
.topbar{
  position:sticky; top:0; z-index:20; background:var(--paper); color:var(--ink);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; padding:12px 16px; min-height:56px;
}
.topbar__back{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-pill);
  background:transparent; border:none; color:var(--ink); flex:0 0 auto;
}
.topbar__back:hover{background:var(--surface-2);}
.topbar__titles{flex:1 1 auto; min-width:0;}
.topbar__eyebrow{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar__title{font-family:var(--font-display); font-weight:500; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar__brand{display:flex; align-items:center; gap:10px;}
.topbar__mark{height:28px; width:auto; display:block; flex:0 0 auto;}
.topbar__user{flex:0 0 auto; display:flex; align-items:center; gap:8px;}
.rolechip{font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-m); background:var(--surface-2); color:var(--ink-muted);}
.iconbtn{width:36px; height:36px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center;}
.iconbtn:hover{background:var(--surface-2);}

.view{flex:1 1 auto; padding:16px; overflow-x:hidden;}
.view > .stack{display:flex; flex-direction:column; gap:14px;}

.topnav{
  /* Celowo NIE sticky: razem z .topbar (też sticky top:0, wyższy z-index)
     przy przewijaniu nachodziły na siebie i topnav znikał pod topbarem
     (znalezione 2026-09-15 przy okazji anchor-linków do budów). */
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; gap:8px; padding:8px 16px;
}
.topnav__item{
  flex:1 1 0; min-width:0; padding:9px 4px; background:var(--surface-2); border:none; color:var(--ink-muted);
  border-radius:var(--radius-m); font-size:12px; font-weight:500; text-align:center; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis;
}
.topnav__item.active{color:var(--accent-ink); background:var(--structure);}
.owner-only{}
body:not(.role-owner) .owner-only{display:none!important;}
body.role-owner .manager-only{display:none!important;}

/* ============ TYPO HELPERS ============ */
.eyebrow{font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted);}
.h1{font-size:21px; font-weight:500; letter-spacing:-.21px;}
.h2{font-size:18px; font-weight:450; letter-spacing:-.18px;}
.h3{font-size:16px; font-weight:500; letter-spacing:-.16px;}
.channel-name{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:700; letter-spacing:0;}
.channel-hash{color:var(--ink-faint); font-weight:500;}
.muted{color:var(--ink-muted);}
.faint{color:var(--ink-faint); font-size:13px;}
.small{font-size:13px;}

/* ============ CARD / SURFACES ============ */
/* Standard Card — white surface, hairline lavender-mist rule, barely-there shadow, sharp 4px corners */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:16px; box-shadow:var(--shadow-float);}
.card--flush{padding:0; overflow:hidden;}
.card--tap{display:block; width:100%; text-align:left; cursor:pointer;}
.card--tap:hover{border-color:var(--line-strong);}
.card--tap:active{transform:translateY(1px);}
/* Product Mockup Card — the signature white inner-glow on a tinted backdrop; reserved for the Discord "screenshot" preview */
.card--float{background:var(--surface-2); border-radius:var(--radius-feature); box-shadow:none; padding:10px;}
.card--float > .glow{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow-1); padding:16px;}
.panel{border-radius:var(--radius-l); padding:16px; border:1px solid var(--line);}
.panel--warn{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn);}
.panel--info{background:var(--info-soft); border-color:var(--info-line);}
.panel--danger{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger);}
.panel--accent{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-hover);}
.divider{height:1px; background:var(--line); border:none; margin:2px 0;}

/* ============ CHIPS / BADGES — dark ink text + pastel wash, never inverted ============ */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:3px 9px; border-radius:var(--radius-m); letter-spacing:-.01em; white-space:nowrap; box-shadow:0 0 0 1px currentColor inset;}
.chip--ok{background:var(--ok-soft); color:var(--ok);}
.chip--warn{background:var(--warn-soft); color:var(--warn);}
.chip--danger{background:var(--danger-soft); color:var(--danger);}
.chip--info{background:var(--info-soft); color:var(--info);}
.chip--draft{background:var(--surface-2); color:var(--ink-muted);}
.chip--accent{background:var(--tag-violet-soft); color:var(--tag-violet);}
.tag{display:inline-flex; align-items:center; font-size:12px; font-weight:400; padding:2px 8px; border-radius:var(--radius-m); background:var(--surface-2); color:var(--ink-muted); white-space:nowrap;}
.tag--carried{background:var(--tag-orange-soft); color:var(--tag-orange); box-shadow:0 0 0 1px currentColor inset;}
.avatar{width:38px; height:38px; border-radius:var(--radius-pill); background:var(--structure); color:var(--structure-ink); display:flex; align-items:center; justify-content:center; font-weight:500; font-size:13px; flex:0 0 auto;}
.avatar--t1{background:var(--ok-soft); color:var(--ok);}
.avatar--t2{background:var(--info-soft); color:var(--info);}
.avatar--t3{background:var(--tag-pink-soft); color:var(--tag-pink);}
.avatar--t4{background:var(--tag-violet-soft); color:var(--tag-violet);}

/* ============ BUTTONS — sharp 4px corners; pills stay reserved for tabs/steps ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border-radius:var(--radius-m); font-weight:450; font-size:15px; letter-spacing:-.01em; border:1px solid transparent; width:100%;}
.btn--sm{min-height:38px; font-size:13px; padding:0 14px; width:auto;}
.btn--auto{width:auto;}
.btn-primary{background:var(--structure); color:var(--structure-ink);}
.btn-primary:hover{background:var(--structure-2);}
.btn-primary:disabled{opacity:.5; cursor:not-allowed;}
/* the sole saturated fill — reserve for the one "activating" action per screen (publish/update to Discord) */
.btn-accent{background:var(--accent); color:var(--accent-ink);}
.btn-accent:hover{background:var(--accent-hover);}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-secondary:hover{background:var(--surface-2);}
.btn-ghost{background:transparent; color:var(--ink-muted); border-color:transparent;}
.btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
.btn-danger{background:transparent; color:var(--danger); border-color:var(--danger-line);}
.btn-danger:hover{background:var(--danger-soft);}
.row-btns{display:flex; gap:10px;}
.row-btns > *{flex:1 1 0;}

/* ============ FORMS ============ */
.field{display:flex; flex-direction:column; gap:6px;}
.label{font-size:12px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-muted);}
.hint{font-size:12px; color:var(--ink-faint);}
.input,.select,.textarea{
  width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:var(--radius-m); padding:13px 16px; min-height:48px;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-placeholder);}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.textarea{min-height:84px; resize:vertical; line-height:1.5;}
.input[readonly], .input:disabled, .select:disabled{background:var(--surface-2); color:var(--ink-muted); border-color:var(--surface-2);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.checkline{display:flex; align-items:center; gap:10px; padding:10px 2px; min-height:44px;}
.checkline input[type=checkbox]{width:20px; height:20px; accent-color:var(--accent); flex:0 0 auto;}
.radiogroup{display:flex; gap:8px;}
.radiopill{flex:1; text-align:center; padding:11px 8px; border:1px solid var(--line-strong); border-radius:var(--radius-pill); font-weight:500; font-size:14px; cursor:pointer; color:var(--ink);}
.radiopill input{position:absolute; opacity:0; pointer-events:none;}
.radiopill.active{background:var(--accent); border-color:var(--accent); color:#fff;}

/* ============ TABS — Tabs Row: pill container, ink active state ============ */
.tabbar{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:var(--radius-pill);}
.tabbar__btn{flex:1; padding:9px 8px; border:1px solid transparent; background:transparent; border-radius:var(--radius-pill); font-weight:450; font-size:13px; color:var(--ink-muted);}
.tabbar__btn.active{background:var(--surface); color:var(--ink); border-color:var(--ink);}
.subtabs{display:flex; gap:18px; border-bottom:1px solid var(--line);}
.subtabs__btn{padding:10px 2px; border:none; background:none; font-weight:500; font-size:14px; color:var(--ink-faint); border-bottom:2px solid transparent; margin-bottom:-1px;}
.subtabs__btn.active{color:var(--ink); border-color:var(--accent);}

/* ============ BANNERS / ALERTS ============ */
.banner{display:flex; gap:10px; padding:13px 16px; border-radius:var(--radius-m); border:1px solid; align-items:flex-start;}
.banner--warn{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn);}
.banner--danger{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger);}
.banner--info{background:var(--info-soft); border-color:var(--info-line); color:var(--info);}
.banner p{color:var(--ink); font-size:13.5px; line-height:1.45;}
.banner svg{flex:0 0 auto; margin-top:1px;}

/* ============ BACKLOG PANEL ============ */
.backlog-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px; display:flex; flex-direction:column; gap:8px;}
.backlog-item.done{opacity:.5;}
.backlog-item__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.backlog-item__desc{font-weight:500; font-size:14.5px;}
.backlog-item__meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.streakbadge{font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--radius-m); box-shadow:0 0 0 1px currentColor inset;}
.streakbadge--2{background:var(--info-soft); color:var(--info);}
.streakbadge--3{background:var(--danger-soft); color:var(--danger);}

/* ============ TASK ROWS ============ */
.taskrow{border-radius:var(--radius-m); padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--surface-2);}
.taskrow__head{display:flex; gap:8px; align-items:flex-start;}
.taskrow__num{width:24px; height:24px; border-radius:var(--radius-pill); background:var(--surface); color:var(--ink-muted); font-weight:500; font-size:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:12px;}
.taskrow__grid{flex:1; display:flex; flex-direction:column; gap:8px;}
.taskrow__cols{display:grid; grid-template-columns:1.15fr 0.9fr 0.95fr; gap:6px;}
.taskrow__cols .input, .taskrow__cols .select{padding:10px 6px; font-size:14px; min-width:0;}
.taskrow__remove{flex:0 0 auto; width:36px; height:36px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--ink-faint); margin-top:6px;}
.taskrow__remove:hover{background:var(--danger-soft); color:var(--danger);}
.taskrow__tags{display:flex; flex-wrap:wrap; gap:6px;}

/* ============ DISCORD PREVIEW ============ */
.discord{background:#313338; color:#DBDEE1; border-radius:var(--radius-s); padding:16px; font-family:var(--font-body); box-shadow:none;}
.discord__chan{display:flex; align-items:center; gap:6px; color:#96989D; font-size:12px; font-weight:600; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #3F4147;}
.discord__msg{display:flex; gap:12px;}
.discord__avatar{width:40px; height:40px; border-radius:999px; background:linear-gradient(135deg,#C1531C,#E07A3B); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:13px; flex:0 0 auto;}
.discord__body{min-width:0; flex:1;}
.discord__author{display:flex; align-items:center; gap:7px; margin-bottom:4px;}
.discord__name{color:#F2F3F5; font-weight:600; font-size:15px;}
.discord__bottag{background:#5865F2; color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px; letter-spacing:.02em;}
.discord__time{color:#949BA4; font-size:12px;}
.discord__content{font-size:14.5px; line-height:1.5; word-wrap:break-word;}
.discord__content h4{color:#F2F3F5; font-size:15.5px; font-weight:700; margin:10px 0 6px;}
.discord__content h4:first-child{margin-top:0;}
.discord__content b{color:#F2F3F5;}
.discord__content ol{margin:6px 0; padding-left:20px;}
.discord__content li{margin-bottom:5px;}
.discord__content .miss{color:#F2A794; font-style:italic;}
.discord__content .fieldline{margin:4px 0;}
.discord__dot{display:inline-block; width:10px; height:10px; border-radius:999px; background:#DA373C; margin-right:5px; vertical-align:middle;}
.discord__pin{color:#949BA4;}

/* ============ MISC ============ */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.spacer{flex:1;}
.list{display:flex; flex-direction:column; gap:10px;}
.kv{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:2px 0;}
.kv .k{color:var(--ink-muted);}
.kv .v{font-weight:600; text-align:right;}
.stickybar{position:sticky; bottom:0; background:var(--paper); padding-top:10px; margin-top:4px;}
.toast{position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(20px); background:var(--structure); color:var(--structure-ink); padding:12px 20px; border-radius:var(--radius-m); font-weight:450; font-size:13.5px; box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:60; white-space:nowrap;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.login-shell{min-height:100vh; background:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:32px 24px; gap:28px;}
.login-logo{height:52px; width:auto; display:block;}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.login-title{font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
.demo-note{border:1px solid var(--line); border-radius:var(--radius-m); padding:14px; font-size:12.5px; color:var(--ink-muted); display:flex; flex-direction:column; gap:8px;}
.copybox{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:10px 12px; font-size:12px; font-family:ui-monospace,Consolas,monospace; color:var(--ink-muted); max-height:120px; overflow:auto; white-space:pre-wrap;}
.entry-title{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.section-head{display:flex; justify-content:space-between; align-items:center; gap:10px;}