/* ============================================================
   ISAK OS — platform layer
   The parts of a real application the prototype had no need for:
   booting, saving, failing to save, and being told somebody else
   changed the thing you are looking at.

   Every value here comes from the design system in app.css. Nothing
   in this file restyles anything the prototype drew.
   ============================================================ */

/* ---------- Boot ----------
   Held over the whole page until the session and the company's data are in
   memory. Without it the app paints an empty shell first and then jumps. */
.bootwrap{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;gap:0;
  background:radial-gradient(1200px 600px at 50% -10%, #0A5A8C 0%, var(--chassis) 55%, #011E31 100%);
  align-content:center;
}
.bootwrap::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--alarm)}
.bootwrap[hidden]{display:none}
.boot-logo{width:132px;height:auto;display:block;margin:0 auto 18px}
.boot-eng{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;font-size:10px;color:#7093AE;text-align:center;margin-bottom:14px;
}
.boot-bar{width:190px;height:2px;background:rgba(255,255,255,.13);border-radius:2px;overflow:hidden;margin:0 auto}
.boot-bar i{display:block;width:38%;height:100%;background:var(--alarm);border-radius:2px;animation:bootslide 1.15s ease-in-out infinite}
@keyframes bootslide{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}
.boot-fail{max-width:420px;text-align:center;color:#C6D8E5;font-size:13px;line-height:1.6;padding:0 24px}
.boot-fail b{color:#fff;display:block;font-size:15px;margin-bottom:6px}
.boot-fail button{
  margin-top:16px;background:var(--alarm);color:#fff;border:0;border-radius:5px;
  padding:8px 18px;font:inherit;font-weight:600;cursor:pointer;
}

/* ---------- Sync bar ----------
   Hidden while everything is saved, which is nearly always. It only speaks up
   when there is something the person needs to know: a save in flight that has
   not landed, a lost connection, or a teammate's change arriving underneath
   them. A sibling project lost three days of work to saves that failed
   silently — this is the thing that refuses to be silent. */
.syncbar{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:150;
  display:flex;align-items:center;gap:9px;
  background:var(--chassis);color:#fff;
  padding:7px 14px;border-radius:20px;
  font-size:12.25px;font-weight:500;
  box-shadow:var(--shadow-lg);
  max-width:min(680px,calc(100vw - 32px));
}
.syncbar[hidden]{display:none}
.syncbar .dot{width:7px;height:7px;border-radius:50%;background:var(--steel-2);flex:0 0 7px}
.syncbar button{
  background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:4px;
  padding:3px 10px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.syncbar button:hover{background:rgba(255,255,255,.26)}
.syncbar button[hidden]{display:none}

.syncbar.saving .dot{background:var(--steel-2);animation:syncpulse 1s ease-in-out infinite}
.syncbar.warn{background:var(--superv);color:#2A1C00}
.syncbar.warn .dot{background:#2A1C00}
.syncbar.warn button{background:rgba(0,0,0,.16);color:#2A1C00}
.syncbar.bad{background:var(--alarm)}
.syncbar.bad .dot{background:#fff;animation:syncpulse 1s ease-in-out infinite}
.syncbar.ok{background:var(--clear)}
.syncbar.ok .dot{background:#fff;animation:none}
@keyframes syncpulse{0%,100%{opacity:1}50%{opacity:.28}}

/* ---------- States the prototype never needed ---------- */

/* Empty: a real database starts with nothing in it. Every list needs
   something to say other than a blank rectangle. */
.emptystate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:44px 24px;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--radius-lg);background:var(--surface-2);
}
.emptystate svg{width:26px;height:26px;margin-bottom:11px;color:var(--line);stroke-width:1.4}
.emptystate .t{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;font-size:10.5px;color:var(--ink-2);margin-bottom:6px}
.emptystate .d{font-size:12.5px;max-width:380px;line-height:1.55}
.emptystate .btn{margin-top:14px}

/* Loading: a placeholder with the same footprint as the thing it replaces, so
   nothing shifts when the data lands. */
.skel{background:linear-gradient(90deg,var(--line-2) 25%,var(--surface-2) 50%,var(--line-2) 75%);
  background-size:400% 100%;animation:skelslide 1.3s ease-in-out infinite;border-radius:4px;height:12px}
@keyframes skelslide{0%{background-position:100% 0}100%{background-position:0 0}}

/* A field the server rejected. */
.inp.bad,.ta.bad{border-color:var(--alarm);background:#FEF6F6}
.fielderr{color:var(--alarm);font-size:11.5px;font-weight:600;margin-top:4px}

/* ---------- Demo-data notice ----------
   Some of the seeded company data is generated, not recorded: eight months of
   meeting records and the earlier scorecard weeks come out of a seeded random
   number generator. It must never be able to pass for history, so it says so
   wherever it appears. */
.seedwarn{
  display:flex;align-items:flex-start;gap:9px;
  background:#FFF8E7;border:1px solid #F0DCA8;border-left:3px solid var(--superv);
  border-radius:var(--radius);padding:9px 12px;margin-bottom:14px;
  font-size:12.25px;color:#5A4200;line-height:1.5;
}
.seedwarn b{font-weight:700}
.tag.seeded{background:#FFF1CF;color:#7A5800;border-color:#F0DCA8}

/* ---------- Sign in with Google ----------
   Google's brand guidelines ask for their own mark, white or grey button, and
   the exact words "Continue with Google" — so this one control does not use the
   design system's button. Everything around it does. */
.loginor{display:flex;align-items:center;gap:10px;margin:14px 0 12px}
.loginor::before,.loginor::after{content:"";flex:1;height:1px;background:var(--line)}
.loginor span{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;font-size:9.5px;color:var(--muted);
}
.gbtn{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;padding:9px 14px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:#1F1F1F;
  font-family:var(--body);font-size:13.5px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background .13s,border-color .13s,box-shadow .13s;
}
.gbtn:hover{background:var(--surface-2);border-color:var(--steel-2);box-shadow:var(--shadow)}
.gbtn svg{width:17px;height:17px;flex:0 0 17px}
#li_google[hidden]{display:none}

/* ---------- Password card ---------- */
#pwbox[hidden]{display:none}
#pwbox .btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);cursor:pointer}
#pwbox .btn.p{background:var(--alarm);border-color:var(--alarm);color:#fff}

/* ---------- Signed-out ----------
   The prototype hid the app by setting an inline style. Session handling needs
   to do the same from more than one place, so it gets a class. */
.app.hidden{display:none}

@media (max-width:600px){
  .syncbar{left:12px;right:12px;transform:none;max-width:none;border-radius:8px}
}