/* Stunden – Stylesheet
   Gestaltung „Stempelkarte“: kühles Papier, Tinte, gelber Textmarker; eckig, Ziffern in Monospace.
   Aufbau: Tokens → Grundlagen → Kopf → Woche → Eingabe → Summen → Hinweise → Hover/Desktop → Hilfsklassen */
:root{
  --paper:#E6E9EE; --card:#F5F6F8; --ink:#0F172A; --ink2:#5A6478; --rule:#C9CFD8;
  --mark:#FFD60A; --mark-ink:#0F172A; --bar:#0F172A; --red:#D7263D; --green:#127A4B;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,"Helvetica Neue",system-ui,sans-serif;
  --pre:#FFF0A3; --pre-line:#0F172A;
  --plot:172px; --head:24px; --lbl:46px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0C1018; --card:#141A24; --ink:#E8ECF2; --ink2:#8792A6; --rule:#263042;
  --mark:#FFD60A; --mark-ink:#0F172A; --bar:#E8ECF2; --red:#FF5A6E; --green:#3DDC97;
  --pre:rgba(255,214,10,.16); --pre-line:#FFD60A; color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--paper);color:var(--ink);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%}
body{font:16px/1.4 var(--sans);padding:calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 32px) calc(env(safe-area-inset-left) + 18px)}
main{max-width:440px;margin:0 auto;display:grid;gap:14px}
main>*{min-width:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cap{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}

/* Kopf */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.brand{font:800 22px/1 var(--sans);letter-spacing:-.02em;white-space:nowrap}
.brand i{display:inline-block;width:10px;height:10px;background:var(--mark);margin-right:8px;vertical-align:2px}
.week-nav{display:flex;align-items:center}
.week-nav b{font:600 14px var(--mono);padding:0 4px;white-space:nowrap}
.week-nav .nav-arrow{width:40px;height:40px;font:600 18px var(--mono);color:var(--ink2)}
.week-nav .nav-arrow:active{background:var(--rule)}
#today-button{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);padding:6px 8px;margin-right:6px}
#today-button:active{background:var(--mark);color:var(--mark-ink)}

/* Woche: eine Spalte pro Tag, Balken und Datum sind ein Tippziel */
.week{position:relative;padding-top:22px}
.legend{position:absolute;top:0;left:0;display:flex;align-items:center;gap:6px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.legend i{width:18px;border-top:1.5px dashed var(--ink2)}
.columns{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.col{display:flex;flex-direction:column;min-width:0}
.plot{position:relative;height:var(--plot)}
.bar{position:absolute;left:0;right:0;bottom:0;height:calc((var(--plot) - var(--head)) * var(--f));background:var(--bar)}
.value{position:absolute;left:50%;transform:translateX(-50%);bottom:calc((var(--plot) - var(--head)) * var(--f) + 4px);z-index:2;padding:0 2px;background:var(--paper);font:600 11px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.day-label{height:var(--lbl);display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 12px/1.25 var(--mono)}
.day-label small{font-size:11px;font-weight:400;color:var(--ink2)}
.col.today .day-label b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.col.sel .day-label{background:var(--ink);color:var(--paper)}
.col.sel .day-label small{color:var(--paper);opacity:.7}
.col.free .bar{background:repeating-linear-gradient(135deg,var(--ink2) 0 2px,transparent 2px 7px);opacity:.45}
.col.miss .bar{height:4px;background:var(--red)}
.col.miss .value{bottom:8px;color:var(--red)}
.col.sel .bar{background:var(--mark);box-shadow:inset 0 0 0 2px var(--ink);opacity:1}
.col.sel.free .bar{background:repeating-linear-gradient(135deg,var(--ink) 0 2px,var(--mark) 2px 7px)}
.col.pre .bar{background:var(--pre);box-shadow:none;outline:2px dashed var(--pre-line);outline-offset:-2px}
.col:active .plot{opacity:.75}
.base{position:absolute;left:0;right:0;bottom:var(--lbl);height:1.5px;background:var(--ink);pointer-events:none}
.target-line{position:absolute;left:0;right:0;height:0;bottom:calc(var(--lbl) + (var(--plot) - var(--head)) * var(--fs));border-top:1.5px dashed var(--ink2);pointer-events:none}

/* Eingabe */
.entry{background:var(--card);border:1.5px solid var(--ink);padding:16px;display:grid;gap:12px}
.entry-head{display:grid;gap:2px;min-width:0}
.entry-head>*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
#day-info{display:flex;gap:.6em}
#day-info span:first-child{overflow:hidden;text-overflow:ellipsis}
#day-info span+span{flex:none}
.entry-head b{font:700 17px var(--sans)}
.picker{display:flex;align-items:center;justify-content:space-between;gap:12px}
#duration{font:700 clamp(44px, calc(16vw - 6px), 64px)/1.05 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;white-space:nowrap}
.stepper{display:flex;gap:8px}
.stepper button{width:clamp(48px, 14vw, 58px);height:clamp(48px, 14vw, 58px);border:1.5px solid var(--ink);font:500 30px/1 var(--mono);display:grid;place-items:center;-webkit-touch-callout:none}
.stepper button:active{background:var(--mark);color:var(--mark-ink)}
.stepper button:disabled{opacity:.3}
.actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:4px}
.actions button{height:54px;font:700 16px var(--sans);letter-spacing:.01em}
#save{background:var(--mark);color:var(--mark-ink);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
#save:not(:disabled):active{transform:translate(4px,4px);box-shadow:none}
#save:disabled{background:none;color:var(--ink2);border-color:var(--rule);box-shadow:none;cursor:default}
#save.done{color:var(--green)}
#free{padding:0 20px;border:1.5px solid var(--ink)}
#free[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
#free:disabled{cursor:default}
#delete{justify-self:start;font-size:13px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;padding:4px 0}

/* Summen */
.totals{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink)}
.totals div{padding:10px clamp(8px, 3vw, 12px);display:grid;gap:2px;min-width:0}
.totals div+div{border-left:1.5px solid var(--ink)}
.totals .big{font:700 clamp(16px, 5vw, 20px) var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.totals .sm{font:500 12px var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.totals .sm span{display:block}
.totals .big{white-space:nowrap}
.pos{color:var(--green)} .neg{color:var(--red)}


.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100vw - 36px);background:var(--ink);color:var(--paper);padding:10px 16px;font:600 13px var(--mono);letter-spacing:.04em;white-space:nowrap}
.toast button{color:var(--mark);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
@media (max-width:359px){
  .brand{font-size:18px}
  .week-nav .nav-arrow{width:32px}
  .week-nav b{font-size:13px}
  #today-button{padding:5px 6px;margin-right:4px}
}
/* Abgleich: Statuszeile und Anmelde-Dialog */
.sync{justify-self:center;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 10px;font:500 12px var(--mono);letter-spacing:.04em;color:var(--ink2)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--ink2);flex:none}
.sync[data-tone="ok"] i{background:var(--green)}
.sync[data-tone="busy"] i{background:var(--mark);box-shadow:0 0 0 1.5px var(--ink)}
.sync[data-tone="bad"]{color:var(--red)}
.sync[data-tone="bad"] i{background:var(--red)}
dialog{box-sizing:border-box;max-width:calc(100vw - 36px);border:1.5px solid var(--ink);background:var(--card);color:var(--ink);padding:20px;width:min(360px,calc(100vw - 36px));box-shadow:6px 6px 0 var(--ink)}
dialog::backdrop{background:rgba(12,16,24,.45)}
dialog h2{font:700 19px var(--sans);margin:0}
#login-target{margin:-6px 0 4px;font:500 12px var(--mono);color:var(--ink2);overflow-wrap:anywhere}
dialog form,dialog #sync-info{display:grid;gap:12px}
dialog label{display:grid;gap:4px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
dialog input{width:100%;min-width:0;font:16px var(--sans);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:0;padding:10px;-webkit-user-select:text;user-select:text}
dialog input:focus{outline:2px solid var(--mark);outline-offset:0}
#sync-detail{margin:0;font-size:15px;line-height:1.45}
.login-error{min-height:1.4em;margin:0;font-size:13px;color:var(--red)}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.dialog-actions button{height:44px;padding:0 16px;font:700 15px var(--sans);border:1.5px solid var(--ink)}
.dialog-actions .primary{background:var(--mark);color:var(--mark-ink)}
.dialog-actions button:disabled{opacity:.5}

/* Desktop: Diagramm groß links, Eingabe und Summen rechts, vertikal zentriert */
.keys{display:none}
@media (hover:hover) and (pointer:fine){
  .col:hover .plot{opacity:.8}
  .col:hover .day-label{outline:1.5px solid var(--ink);outline-offset:-1.5px}
  .col.sel:hover .day-label{outline:none}
  .stepper button:not(:disabled):hover,#free:hover,#today-button:hover{background:var(--rule)}
  .stepper button:not(:disabled):active,#today-button:active{background:var(--mark);color:var(--mark-ink)}
  #free[aria-pressed="true"]:hover{background:var(--ink);opacity:.85}
  #save:not(:disabled):hover{filter:brightness(1.05)}
  .week-nav .nav-arrow:hover{background:var(--rule);color:var(--ink)}
  #delete:hover,.toast button:hover{color:var(--ink)}
  .toast button:hover{color:var(--mark);opacity:.8}
}
@media (min-width:900px){
  :root{--plot:320px;--head:28px;--lbl:52px}
  body{min-height:100vh;display:flex;align-items:center}
  main{width:100%;max-width:1040px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"top top" "week entry" "week totals" "keys sync";column-gap:44px;row-gap:18px;align-items:start}
  .app-header{grid-area:top}
  .week{grid-area:week;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
  .entry{grid-area:entry;padding:22px}
  .totals{grid-area:totals}
  .brand{font-size:26px}
  .columns{gap:10px}
  .day-label{font-size:14px}
  .day-label small{font-size:12px}
  .value{font-size:13px}
  .entry-head b{font-size:20px}
  #duration{font-size:72px}
  .stepper button{width:60px;height:60px}
  .sync{grid-area:sync;justify-self:end}
  .keys{display:block;grid-area:keys;margin:6px 0 0;font:500 12px var(--mono);color:var(--ink2);letter-spacing:.02em}
  .keys kbd{font:inherit;border:1px solid var(--rule);padding:1px 5px;margin:0 2px;color:var(--ink)}
}
@media (min-width:900px) and (pointer:coarse){ .keys{display:none} }
[hidden]{display:none!important}
.reserve-space[hidden]{display:revert!important;visibility:hidden}