body{margin:0;background:oklch(93% 0.006 250);}
body.night{background:oklch(20% 0.01 250);}
*{box-sizing:border-box;font-family:'Atkinson Hyperlegible',Helvetica,Arial,sans-serif;}
a{color:oklch(45% 0.07 195);text-decoration:underline;}
a:hover{color:oklch(37% 0.07 195);}
button{cursor:pointer;font-family:inherit;}
button[data-action="pin.press"],button[data-action="pin.backspace"]{-webkit-tap-highlight-color:transparent;transition:background-color 0.1s;}
button[data-action="pin.press"]:active,button[data-action="pin.backspace"]:active{background:oklch(85% 0.006 250)!important;}
::-webkit-scrollbar{width:0px;}
input[type="date"]{cursor:pointer;}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.55;padding:4px;border-radius:6px;}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:0.85;background:oklch(94% 0.005 250);}
input[type="date"]:focus{outline:2px solid oklch(74% 0.09 145);outline-offset:1px;}
/* width:100% (not a fixed 430px) so phones narrower than 430px (very
   common - iPhone SE/12/13 at 375-390px, many Android phones at 360-412px)
   don't force horizontal overflow/scrolling. max-width still caps it at
   430px on anything wider, and the >=820px block below still centers it
   as a card on desktop. */
#app-shell{width:100%;max-width:430px;margin:0 auto;min-height:100vh;scrollbar-gutter:stable;}
#app-overlay{width:100%;max-width:430px;margin:0 auto;}
@media (min-width:820px){
  /* Do 31. 8. 2026 je bil desktop samo telefonska maketa: 430px sirok
     "telefon" s fiksno visino 844px in lastnim notranjim drsnikom, sredi
     zaslona. Na 27-palcnem monitorju je to pustilo 90% prostora praznega.
     Zdaj se lupina razsiri, drsi cela stran (glava ostane sticky ob vrhu
     okna), seznam nalog pa preide v vec stolpcev. */
  body{display:flex;justify-content:center;padding:28px 24px;}
  #app-shell{
    max-width:1180px;
    min-height:0;
    height:auto;
    max-height:none;
    border-radius:20px;
    box-shadow:0 24px 60px -24px oklch(20% 0 0 / 22%),0 2px 10px oklch(20% 0 0 / 7%);
  }
  /* Enostolpcni pogledi (Fokus, Vnos taska, Plan) ostanejo berljivo ozki.
     Vrstica se ne razteza cez cel monitor, ker ~760px je meja udobnega
     branja. Seznam nalog je izvzet, ker ta hoce sirino. */
  #app-content > div:not(.task-grid){max-width:780px;}
  /* !important, ker so postavitveni slogi v app.js inline in bi sicer
     premagali stylesheet. */
  .task-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(370px,1fr));
    align-items:start;
    gap:12px !important;
  }
  /* Gumb "+ Vnesi task" cez vse stolpce, da ostane na vrhu kot prej. */
  .task-grid > button{grid-column:1 / -1;}
}