/* Kaladian Intranet.
   Palette and type follow /identity, which is the source of truth. Fonts are
   self-hosted from /fonts, so the page has no third-party font dependency.
   The Firebase SDK on app.js is the only external origin, and the intranet
   Content-Security-Policy in firebase.json names it explicitly. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-var-latin.edfe364f.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-var-latin-ext.e08937bf.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/roboto-mono-400-latin.3ee027bb.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#F8F9FA;
  --surface:#FFFFFF;
  --ink:#202124;
  --muted:#5F6368;
  --steel:#33414F;
  --mist:#8FA3B5;
  --rule:#E8EAED;
  --focus:#33414F; /* Steel. Cyan on a light ground is 1.77:1 and fails the 3:1 focus minimum. */
  --error:#C5221F;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

[hidden]{display:none !important;}

.wrap{width:100%;max-width:880px;margin:0 auto;padding:0 24px;}

a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

/* --- signed-out ---------------------------------------------------------- */
#login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;}

.login-card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:36px 32px;
  max-width:400px;
  width:100%;
  text-align:center;
  box-shadow:0 1px 3px rgba(32,33,36,0.06);
}

.login-card .logo{display:block;width:auto;height:32px;margin:0 auto 20px;}
.login-card h1{font-size:1.3rem;margin:0 0 8px;letter-spacing:-0.01em;}
.login-card .muted{color:var(--steel);margin:0 0 22px;font-size:0.925rem;}

.google-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:44px;
  background:var(--surface);
  border:1px solid var(--mist);
  border-radius:8px;
  padding:0 18px;
  font-family:inherit;
  font-size:0.95rem;
  font-weight:600;
  color:var(--steel);
  cursor:pointer;
  transition:background-color 160ms ease,border-color 160ms ease;
}

.google-btn:hover:not(:disabled){background:var(--bg);border-color:var(--steel);}
.google-btn:disabled{opacity:0.6;cursor:default;}

.error{color:var(--error);font-size:0.85rem;margin:14px 0 0;}

.fine{font-size:0.75rem;color:var(--muted);margin:22px 0 0;line-height:1.5;}

/* --- masthead ------------------------------------------------------------ */
.masthead{background:var(--surface);border-bottom:1px solid var(--rule);}

.masthead-inner{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-top:20px;
  padding-bottom:20px;
}

.logo{display:block;width:auto;height:34px;}

.masthead-label{
  font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  border-left:1px solid var(--rule);
  padding-left:14px;
}

.who{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:0.85rem;
  color:var(--muted);
}

.who-email{
  font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
}

.link-btn{
  background:none;
  border:none;
  padding:0;
  min-height:44px;
  font-family:inherit;
  font-size:0.85rem;
  font-weight:600;
  color:var(--steel);
  cursor:pointer;
  text-decoration:underline;
}

/* --- tabs ---------------------------------------------------------------- */
/* Links to separate documents, so this is navigation rather than an ARIA tab
   widget. aria-current marks the page you are on. */
.tabs{background:var(--surface);border-bottom:1px solid var(--rule);}

.tabs ul{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
}

.tab{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color 160ms ease,border-color 160ms ease;
}

.tab:hover{color:var(--ink);border-bottom-color:var(--mist);}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--steel);}

/* --- content ------------------------------------------------------------- */
.content{padding:48px 0 64px;}

h2{font-size:1.6rem;line-height:1.25;letter-spacing:-0.01em;margin:0 0 12px;}
h3{margin:0 0 4px;font-size:1rem;font-weight:600;}

.lede{margin:0 0 32px;color:var(--steel);max-width:56ch;}

.section-label{
  font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:40px 0 14px;
}

.card{
  display:block;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:20px 22px;
  max-width:520px;
  text-decoration:none;
  color:inherit;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}

.card:hover{border-color:var(--mist);box-shadow:0 4px 12px rgba(32,33,36,0.06);}
.card p{margin:0;font-size:0.875rem;color:var(--muted);}

.card-go{display:inline-block;margin-top:14px;font-size:0.875rem;font-weight:500;color:var(--steel);}

/* --- Firestore-backed tiles ---------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}

.tile{
  display:block;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:16px;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  transition:border-color 160ms ease;
}

.tile:hover{border-color:var(--mist);}

.muted{color:var(--muted);}

/* --- footer -------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--rule);
  padding:20px 0;
  font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  color:var(--muted);
}

@media (prefers-reduced-motion:reduce){
  .tab,.card,.tile,.google-btn{transition:none;}
}

@media (max-width:560px){
  .masthead-label{border-left:0;padding-left:0;}
  .who{margin-left:0;flex-basis:100%;}
  .content{padding:32px 0 48px;}
}