/* ================= EVOSCRIPT APP CHROME =================
   Loaded after each page's own styles, so it refines rather than replaces.

   Stock is a print language: flat colour, hard rules, square corners. That is
   right for the landing page, but applied literally to a dense working UI it
   reads as an unstyled wireframe — every element ringed in 1px black, nothing
   floating, no icons, browser-default controls.

   So the identity stays (palette, Anton/Archivo/Courier Prime, the yellow, the
   stamps) and this layer supplies what application software needs: a border
   hierarchy instead of one black rule, real elevation on things that float,
   styled controls, icons, and states that respond.                        */

:root{
  /* Border hierarchy. Almost every --line in the page CSS is an internal
     divider or a card edge; softening the token is what stops the whole app
     looking like a table grid. Structural edges stay black explicitly. */
  --line:#D5CFC1;
  --hair:#E4DFD3;
  --edge:#0B0B0B;

  --lift-1:0 1px 2px rgba(11,11,11,.05), 0 2px 8px rgba(11,11,11,.06);
  --lift-2:0 2px 6px rgba(11,11,11,.07), 0 12px 32px rgba(11,11,11,.12);
  --lift-3:0 8px 24px rgba(11,11,11,.13), 0 32px 64px rgba(11,11,11,.18);

  --ease:cubic-bezier(.2,.8,.25,1);
  --fast:.13s var(--ease);
  --med:.22s var(--ease);

  --focus:0 0 0 2px var(--ink-2), 0 0 0 4px var(--amber);
}
:root[data-theme="dark"]{
  --line:#33302A;
  --hair:#262320;
  --edge:#4A453B;
  --lift-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  --lift-2:0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.5);
  --lift-3:0 8px 24px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.6);
}

/* ---------- motion ---------- */
.btn, .bar-btn, .proj, .cell, .menu-list button, .tb-btn,
input, select, textarea, button{
  transition:background-color var(--fast), border-color var(--fast),
             color var(--fast), box-shadow var(--fast), transform var(--fast);
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- things that float actually float ---------- */
.menu-list, #tagbar, #suggest, #register-modal, #ps-modal, #tp-modal,
#intro-modal, #cs-modal{
  box-shadow:var(--lift-3) !important;
  border:1px solid var(--line) !important;
}
#pro-note{box-shadow:var(--lift-2) !important}

/* ---------- cards lift on hover instead of just changing colour ---------- */
.proj:not(.new):not(.locked){box-shadow:var(--lift-1)}
.proj:not(.new):not(.locked):hover{
  box-shadow:var(--lift-2); transform:translateY(-2px); border-color:var(--edge);
}
.cell{box-shadow:var(--lift-1)}

/* ---------- native controls, styled ---------- */
select{
  appearance:none;-webkit-appearance:none;
  background-color:var(--ink-2);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) center, calc(100% - 10px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  border:1px solid var(--line);color:var(--text);
  padding:7px 30px 7px 11px;font:inherit;font-size:12.5px;
}
select:hover{border-color:var(--edge)}
select:focus-visible, input:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible{
  outline:none; box-shadow:var(--focus);
}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}

input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex:0 0 auto;position:relative;cursor:pointer;
  border:1.5px solid var(--line);background:var(--ink-2);
}
/* the sign-in card styles "#auth input" at width:100%, which outranks a plain
   attribute selector and stretched the consent box into a full-width bar */
#auth input[type=checkbox], #tos-row input[type=checkbox]{
  width:16px;height:16px;padding:0;background:var(--ink-2);
}
input[type=checkbox]:hover{border-color:var(--edge)}
input[type=checkbox]:checked{background:var(--amber);border-color:var(--amber)}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;
  border:solid var(--btn-ink);border-width:0 2px 2px 0;transform:rotate(43deg);
}

/* ---------- icons ---------- */
.ic{
  width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;
  vertical-align:-2px;
}
.ic-lg{width:19px;height:19px}

/* menu items become icon + label rows */
.menu-list button{
  display:flex;align-items:center;gap:10px;
}
.menu-list button .ic{opacity:.6}
.menu-list button:hover .ic{opacity:1}
.menu-list button.locked .ic{opacity:.35}

/* ---------- the tag menu ---------- */
#tagbar{
  display:none;position:fixed;z-index:70;flex-direction:column;
  background:var(--ink-2);min-width:236px;max-width:280px;padding:0;
  border:1px solid var(--line);
}
#tagbar.open{display:flex;animation:tagIn .14s var(--ease)}
@keyframes tagIn{from{opacity:0;transform:translateY(-4px) scale(.99)}to{opacity:1;transform:none}}
#tagbar .tb-head{
  display:flex;align-items:center;gap:8px;padding:11px 13px;
  border-bottom:1px solid var(--hair);
}
#tagbar .tb-head .ic{opacity:.55}
#tagbar .tb-term{
  font-family:"Courier Prime",monospace;font-size:11px;letter-spacing:.04em;
  color:var(--text-dim);flex:1 1 auto;width:auto;min-width:0;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#tagbar .tb-term b{color:var(--text);font-weight:700}
/* short enough that the picker normally opens below the selection rather than
   flipping over the toolbar; the rest of the departments scroll */
#tagbar .tb-list{max-height:198px;overflow-y:auto;padding:5px}
#tagbar .tb-sec{
  font-family:"Courier Prime",monospace;font-size:9px;letter-spacing:.16em;
  color:var(--text-dim);padding:8px 8px 5px;
}
#tagbar button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 9px;font-size:12.5px;letter-spacing:.01em;color:var(--text);
  border:0;background:none;
}
#tagbar button:hover, #tagbar button.on{background:var(--ink-3)}
#tagbar button .sw{
  width:9px;height:9px;flex:0 0 auto;border:1px solid rgba(0,0,0,.25);
}
:root[data-theme="dark"] #tagbar button .sw{border-color:rgba(255,255,255,.25)}
#tagbar .tb-foot{
  display:flex;gap:4px;padding:6px;border-top:1px solid var(--hair);
}
#tagbar .tb-foot button{
  font-family:"Courier Prime",monospace;font-size:10px;letter-spacing:.1em;
  justify-content:center;color:var(--text-dim);
}
#tagbar .tb-foot button:hover{color:var(--text)}
/* #tagbar button sets width:100% for the department rows; the header's
   close button must opt out or it consumes the whole row */
#tagbar #tag-x{flex:0 0 auto;width:auto;padding:4px;color:var(--text-dim)}
#tagbar #tag-x:hover{color:var(--text);background:var(--ink-3)}

/* ---------- breakdown gets its category colours ---------- */
.dept-dot{
  display:inline-block;width:9px;height:9px;margin-right:7px;
  border:1px solid rgba(0,0,0,.25);vertical-align:0;
}
:root[data-theme="dark"] .dept-dot{border-color:rgba(255,255,255,.25)}

/* ---------- scrollbars stop looking like 1995 ---------- */
.menu-list, #tagbar .tb-list, #bd-body, #sd-body, #sch-body, #panel{
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.menu-list::-webkit-scrollbar, #tagbar .tb-list::-webkit-scrollbar,
#bd-body::-webkit-scrollbar, #sd-body::-webkit-scrollbar,
#sch-body::-webkit-scrollbar, #panel::-webkit-scrollbar{width:10px;height:10px}
.menu-list::-webkit-scrollbar-thumb, #tagbar .tb-list::-webkit-scrollbar-thumb,
#bd-body::-webkit-scrollbar-thumb, #sd-body::-webkit-scrollbar-thumb,
#sch-body::-webkit-scrollbar-thumb, #panel::-webkit-scrollbar-thumb{
  background:var(--line);border:3px solid var(--ink);
}
.menu-list::-webkit-scrollbar-track, #tagbar .tb-list::-webkit-scrollbar-track{background:transparent}

/* ---------- buttons get weight and feedback ---------- */
.btn:active, .bar-btn:active{transform:translateY(1px)}
.btn.primary{box-shadow:var(--lift-1)}
.btn.primary:hover{box-shadow:var(--lift-2)}