/* Skórka „Notes”. Działa tylko przy html[data-skin=notebook]. Klasyczna zostaje bez zmian. */
#nb-title,#nb-side,#nb-spiral,#nb-blank,#nb-tabs,#task-search-wrap,.more-btn{display:none}

html[data-skin=notebook]{
  color-scheme:dark;
  background:#12131a;
}
html[data-skin=notebook] body{
  margin:0;
  background:
    radial-gradient(900px 420px at 78% -8%, #2c2644 0%, transparent 60%),
    #12131a;
  color:#e8eaf3;
}

html[data-skin=notebook] header{
  min-height:72px;
  margin:0;
  padding:14px 22px;
  border:0;
  background:transparent;
  position:relative;
  z-index:6;
}
html[data-skin=notebook] .mark{
  width:40px;height:40px;border-radius:14px;
  background:#7c5cff;color:#fff;
}
html[data-skin=notebook] .brand strong{color:#fff;font-size:18px;letter-spacing:-.03em}
html[data-skin=notebook] .brand small{display:none}
html[data-skin=notebook] #sync{color:#9aa3b8;font-size:12px}
html[data-skin=notebook] #logout{display:none}
html[data-skin=notebook] #new-task{
  background:#7c5cff;color:#fff;border:0;border-radius:12px;padding:10px 16px;
}
html[data-skin=notebook] #skin-toggle{
  background:transparent;color:#d7dbea;border:1px solid #3a3f52;border-radius:12px;padding:8px 12px;
}
html[data-skin=notebook] #task-search-wrap{
  display:flex;align-items:center;gap:8px;
  background:#1b1e28;border:1px solid #343846;border-radius:999px;
  padding:0 14px;color:#9aa3b8;min-width:0;
}
html[data-skin=notebook] #task-search{
  display:block;width:min(240px,34vw);background:transparent;border:0;color:#f4f4fa;
  padding:10px 0;border-radius:999px;
}
html[data-skin=notebook] #task-search:focus{outline:none}
html[data-skin=notebook] #task-search-wrap:focus-within{border-color:#7c5cff}

html[data-skin=notebook] #nb-side{
  display:flex;flex-direction:column;position:fixed;z-index:5;
  top:72px;left:0;bottom:0;width:188px;padding:8px 14px 16px;background:transparent;
}
html[data-skin=notebook] #nb-side nav,
html[data-skin=notebook] #nb-side .nb-foot{display:flex;flex-direction:column;gap:4px}
html[data-skin=notebook] #nb-side .nb-foot{margin-top:auto}
html[data-skin=notebook] #nb-side button{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:transparent;color:#c8cde0;border:0;border-radius:12px;
  padding:10px 12px;font-weight:650;font-size:14px;
}
html[data-skin=notebook] #nb-side button:hover{background:#ffffff12;filter:none}
html[data-skin=notebook] #nb-side button.on{background:#6d4aff;color:#fff}
html[data-skin=notebook] #nb-side .nb-ico{width:18px;text-align:center;opacity:.9}
html[data-skin=notebook] #nb-side .nb-count{
  margin-left:auto;background:#2a2e3d;color:#d7dbea;border-radius:999px;
  min-width:22px;text-align:center;font-size:11px;padding:2px 6px;
}
html[data-skin=notebook] #nb-side button.on .nb-count{background:#fff;color:#5b3fd6}

html[data-skin=notebook] body:has(#workspace:not([hidden])){height:100vh;overflow:hidden}
html[data-skin=notebook] body:has(#workspace:not([hidden])) main{
  margin-left:188px;height:calc(100vh - 72px);overflow:hidden;
  padding:0 18px 18px 8px;max-width:none;display:flex;flex-direction:column;
}
html[data-skin=notebook] #workspace{
  display:grid;flex:1;min-height:0;
  grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  position:relative;
  background:linear-gradient(180deg,#8a6248,#6a4632 12%,#5c3b28);
  padding:14px 14px 16px;border-radius:18px;
  box-shadow:0 22px 48px #0008, inset 0 1px 0 #e0c2a4;
}
html[data-skin=notebook] #workspace > nav.toolbar{display:none}
html[data-skin=notebook] .intro{grid-column:1;grid-row:1;margin:0;align-items:flex-end}
html[data-skin=notebook] .safety{grid-column:1;grid-row:2}
html[data-skin=notebook] .board,
html[data-skin=notebook] #archive-view{grid-column:1;grid-row:3;min-height:0}
html[data-skin=notebook] #nb-spiral{display:block;grid-column:2;grid-row:1 / -1}
html[data-skin=notebook] #nb-blank{display:flex;grid-column:3;grid-row:1 / -1}

html[data-skin=notebook] .intro,
html[data-skin=notebook] .safety,
html[data-skin=notebook] .board,
html[data-skin=notebook] #archive-view,
html[data-skin=notebook] #nb-blank{
  background-color:#f6f1e4;color:#1c1914;margin:0;
}
html[data-skin=notebook] .intro{
  border-radius:12px 3px 0 0;padding:18px 18px 0;align-items:center;
}
html[data-skin=notebook] .intro .eyebrow{display:none}
html[data-skin=notebook] #nb-title{
  display:inline-block;margin:0;font-size:28px;letter-spacing:-.04em;color:#1c1914;
  background:linear-gradient(transparent 58%, #ffe566 58% 86%, transparent 86%);
}
html[data-skin=notebook] #total{
  color:#6f675c;border:1.5px solid #cbbfaa;border-radius:999px;
  padding:4px 10px;background:transparent;font-size:12px;
}
html[data-skin=notebook] .safety{
  border:0;border-radius:0;background:#f6f1e4;color:#8a7b68;
  font-size:11px;line-height:1.45;padding:8px 18px 4px;margin:0;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;
}
html[data-skin=notebook] .safety.expanded{white-space:normal;overflow:visible}
html[data-skin=notebook] .board,
html[data-skin=notebook] #archive-view{
  display:flex;flex-direction:column;gap:6px;overflow:auto;
  border-radius:0 0 3px 12px;padding:8px 14px 16px;
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, #eadfcd 31px 32px);
  border:0;min-height:0;
}
html[data-skin=notebook] #archive-view h2{display:none}
html[data-skin=notebook] #nb-blank{
  border-radius:3px 14px 14px 3px;align-items:center;justify-content:center;
  padding:28px;text-align:center;
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, #eadfcd 31px 32px);
}
html[data-skin=notebook] #nb-blank.covered{visibility:hidden}
html[data-skin=notebook] .nb-empty strong{display:block;font-size:22px;margin-bottom:8px}
html[data-skin=notebook] .nb-empty p{color:#8a7b68;max-width:28ch;margin:0 auto}
html[data-skin=notebook] #nb-spiral{
  background-image:radial-gradient(circle at center, #151515 0 5px, #6d6d6d 6px, #d5d5d5 7px, transparent 8.5px);
  background-size:30px 36px;background-repeat:repeat-y;background-position:center 12px;
}

html[data-skin=notebook] .column{
  background:transparent;border:0;min-height:0;padding:8px 2px 4px;border-radius:0;
}
html[data-skin=notebook] .column h2{
  width:fit-content;margin:0 0 10px;border-radius:999px;padding:6px 8px 6px 12px;
  font-size:13px;font-weight:750;color:#3d3428;
}
html[data-skin=notebook] .column[data-status=todo] h2{background:#ece6ff;color:#5b3fd6}
html[data-skin=notebook] .column[data-status=doing] h2{background:#e7eefc;color:#2f5fbf}
html[data-skin=notebook] .column[data-status=review] h2{background:#e5f6ea;color:#1d7a45}
html[data-skin=notebook] .column[data-status=recurring] h2{background:#fff0dc;color:#b86a00}
html[data-skin=notebook] .column i{background:currentColor}
html[data-skin=notebook] .count{
  margin-left:8px;background:#fff;color:inherit;border-radius:999px;padding:2px 7px;
}
html[data-skin=notebook] .cards{min-height:0}
html[data-skin=notebook] .column.over{background:#fff6d8;border-radius:12px}
html[data-skin=notebook] .card{
  background:#fffdf9;color:#1c1914;border:1px solid #efe6d6;border-left-width:4px;
  border-radius:14px;box-shadow:0 6px 16px #5c463018;padding:14px 42px 12px 14px;
}
html[data-skin=notebook] .card:hover{transform:none;border-color:#efe6d6;box-shadow:0 8px 18px #5c463024}
html[data-skin=notebook] .column[data-status=todo] .card{border-left-color:#7c5cff}
html[data-skin=notebook] .column[data-status=doing] .card{border-left-color:#5b8def}
html[data-skin=notebook] .column[data-status=review] .card{border-left-color:#3dbe7a}
html[data-skin=notebook] .column[data-status=recurring] .card{border-left-color:#f0a04b}
html[data-skin=notebook] .card.is-open{border-color:#7c5cff;box-shadow:0 0 0 2px #7c5cff40, 0 8px 18px #5c463024}
html[data-skin=notebook] .card strong{display:block;font-size:15px;margin:0 0 4px}
html[data-skin=notebook] .card p{color:#6f675c;margin:4px 0 8px}
html[data-skin=notebook] .card .schedule{color:#b86a00}
html[data-skin=notebook] .badge{color:#5b3fd6}
html[data-skin=notebook] .approval-badge{background:#fff4d6!important;color:#8a5a00!important}
html[data-skin=notebook] .card .logs-btn{
  width:auto;margin-top:4px;padding:5px 12px;border:0;border-radius:999px;
  background:#ffe566;color:#1c1914;font-size:12px;font-weight:750;
}
html[data-skin=notebook] .card .more-btn{
  display:grid;place-items:center;position:absolute;top:8px;right:8px;
  width:28px;height:28px;padding:0;border:0;border-radius:8px;
  background:transparent;color:#8a7d68;font-size:18px;
}
html[data-skin=notebook] .card .more-btn:hover{background:#f3ecdf;filter:none}
html[data-skin=notebook] .card .drag-handle{display:none}
html[data-skin=notebook] .muted{color:#8a7b68}
html[data-skin=notebook] header .muted{color:#9aa3b8}
html[data-skin=notebook] .approval-banner{
  background:#fff8e8;border-color:#e2c48a;color:#3d3428;
}
html[data-skin=notebook] .approval-banner strong{color:#8a5a00}

html[data-skin=notebook] #nb-tabs{
  display:flex;flex-direction:column;gap:8px;position:fixed;
  right:0;top:168px;z-index:7;
}
html[data-skin=notebook] #nb-tabs button{
  width:112px;max-width:112px;min-height:40px;padding:10px 12px;border:0;border-radius:12px 0 0 12px;
  color:#fff;font-size:12px;font-weight:750;line-height:1.2;white-space:normal;
  text-align:left;box-shadow:-2px 3px 0 #0003;
}
html[data-skin=notebook] #nb-tabs button[data-jump=todo]{background:#7c5cff}
html[data-skin=notebook] #nb-tabs button[data-jump=doing]{background:#5b8def}
html[data-skin=notebook] #nb-tabs button[data-jump=review]{background:#3dbe7a}
html[data-skin=notebook] #nb-tabs button[data-jump=recurring]{background:#f0a04b;color:#1c1914}

html[data-skin=notebook] #drawer,
html[data-skin=notebook] dialog:not(#drawer){
  color-scheme:light;background:#f6f1e4;color:#1c1914;border:0;
}
html[data-skin=notebook] #drawer{
  border-radius:3px 14px 14px 3px;padding:22px 22px 32px;overflow:auto;
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, #eadfcd 31px 32px);
  box-shadow:none;
}
html[data-skin=notebook] #drawer::backdrop{background:transparent}
html[data-skin=notebook] dialog:not(#drawer){
  border-radius:16px;box-shadow:0 24px 60px #000a;
}
html[data-skin=notebook] dialog:not(#drawer)::backdrop{background:#0c0e14cc}
html[data-skin=notebook] #drawer .dialog-head .eyebrow{display:none}
html[data-skin=notebook] #drawer .dialog-head{position:sticky;top:0;z-index:2;justify-content:flex-end;min-height:0}
html[data-skin=notebook] #drawer .quiet,
html[data-skin=notebook] dialog .quiet,
html[data-skin=notebook] dialog .secondary{
  background:transparent;color:#3d3428;border-color:#d9cdb8;
}
html[data-skin=notebook] #drawer h2,
html[data-skin=notebook] dialog h2{color:#1c1914}
html[data-skin=notebook] #task-title{
  background:#e7f8ee;border-radius:14px;padding:14px 44px 14px 16px;margin:0 0 14px;font-size:22px;
}
html[data-skin=notebook] #drawer label,
html[data-skin=notebook] dialog label{color:#5c5348}
html[data-skin=notebook] #drawer input,
html[data-skin=notebook] #drawer textarea,
html[data-skin=notebook] #drawer select,
html[data-skin=notebook] dialog input,
html[data-skin=notebook] dialog textarea,
html[data-skin=notebook] dialog select{
  background:#fff;color:#1c1914;border-color:#e0d5c3;
}
html[data-skin=notebook] #drawer .hint,
html[data-skin=notebook] #drawer .metadata,
html[data-skin=notebook] #drawer .pre{color:#3d3428}
html[data-skin=notebook] #drawer .message{
  background:#fffdf9;color:#1c1914;border-color:#e6dccb;
}
html[data-skin=notebook] #drawer .note{
  background:#fffdf9;color:#1c1914;border-color:#e6dccb;
}
html[data-skin=notebook] #drawer .file-drop{
  background:#fff;color:#3d3428;border-color:#c9b8e8;
}
html[data-skin=notebook] #drawer .file-drop small{color:#8a7b68}
html[data-skin=notebook] #drawer button:not(.quiet):not(.secondary),
html[data-skin=notebook] dialog:not(#drawer) button:not(.quiet):not(.secondary){
  background:#6d4aff;color:#fff;
}
html[data-skin=notebook] .menu{
  background:#fffdf8;color:#1c1914;border-color:#e6dccb;
}
html[data-skin=notebook] .menu button{color:#1c1914}
html[data-skin=notebook] .menu button:hover,
html[data-skin=notebook] .menu button:focus-visible{background:#f3ecdf;filter:none}
html[data-skin=notebook] .archive-row .card{color:#1c1914}

html[data-skin=notebook] body:has(#workspace[hidden]) #nb-side{display:none!important}
html[data-skin=notebook] body:has(#workspace[hidden]) main{
  margin-left:0;height:auto;overflow:visible;padding:38px 4% 60px;display:block;
}

@media(max-width:1100px){
  html[data-skin=notebook] #nb-tabs{display:none}
}
@media(max-width:980px){
  html[data-skin=notebook] body:has(#workspace:not([hidden])){height:auto;overflow:auto}
  html[data-skin=notebook] #nb-side{
    position:static;width:auto;flex-direction:row;flex-wrap:wrap;
    padding:0 12px 8px;top:auto;
  }
  html[data-skin=notebook] #nb-side nav,
  html[data-skin=notebook] #nb-side .nb-foot{flex-direction:row;flex-wrap:wrap;margin:0}
  html[data-skin=notebook] #nb-side button{width:auto}
  html[data-skin=notebook] header{position:sticky;top:0;background:#12131a}
  html[data-skin=notebook] body:has(#workspace:not([hidden])) main{
    margin-left:0;height:auto;overflow:visible;padding:0 12px 28px;display:block;
  }
  html[data-skin=notebook] #workspace{display:block;min-height:0}
  html[data-skin=notebook] #nb-spiral,
  html[data-skin=notebook] #nb-blank,
  html[data-skin=notebook] #nb-tabs{display:none!important}
  html[data-skin=notebook] .board,
  html[data-skin=notebook] #archive-view{max-height:none;overflow:visible;border-radius:0 0 12px 12px}
  html[data-skin=notebook] #drawer{
    width:min(580px,100%);max-width:100%;height:100dvh;max-height:100dvh;
    margin:0 0 0 auto;border-radius:16px 0 0 16px;
  }
}