/* ============================================================
   Maagal — the site shell (side panel + guest header)

   The panel is fixed and the body is padded to clear it, so pages keep
   their existing <main>/<footer> structure untouched. Everything here is
   scoped under .has-panel on <html>, which shell.js sets only for signed-in
   members — guests fall through to the .mhead rules in app.css.
   ============================================================ */

:root{
  --panel-w:224px;
  --panel-w-collapsed:64px;
  --panel-bar-h:54px;
}

/* ---------- auth boot ----------
   A document begins in an unknown state. Keep both guest and member content
   out of the first paint until Supabase resolves, while a presentation-only
   hint reserves the familiar member-shell footprint between page loads. */
.auth-pending main,.auth-pending footer{visibility:hidden}
.auth-pending body::after{
  content:"";position:fixed;z-index:70;inset:50% auto auto 50%;width:28px;height:28px;
  margin:-14px;border:3px solid var(--border-subtle);border-top-color:var(--action-primary);
  border-radius:var(--radius-full);animation:spin .8s linear infinite;
}
.auth-pending.auth-member-hint body{padding-inline-start:var(--panel-w);background:var(--surface-compact-page)}
.auth-pending.auth-member-hint body::before{
  content:"";position:fixed;inset-block:0;inset-inline-start:0;z-index:69;width:var(--panel-w);
  background:var(--surface-compact-card);border-inline-end:1px solid var(--border-compact);
}
.auth-pending.auth-member-hint.panel-collapsed body::before{width:var(--panel-w-collapsed)}
@media(max-width:860px){
  .auth-pending.auth-member-hint body{padding-inline-start:0;padding-block-start:var(--panel-bar-h)}
  .auth-pending.auth-member-hint body::before{inset-inline:0;inset-block:0 auto;width:auto;height:var(--panel-bar-h);border-inline-end:0;border-block-end:1px solid var(--border-compact)}
  .auth-pending.auth-member-hint.panel-collapsed body::before{width:auto}
}

.auth-member main,.auth-guest main{animation:auth-settle 120ms var(--ease-standard)}
@keyframes auth-settle{from{opacity:.86}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.auth-member main,.auth-guest main{animation:none}}

/* Keyboard users land here first; there was no skip link on any page before. */
.skip-link{
  position:absolute;inset-inline-start:var(--space-sm);top:-100px;z-index:60;
  padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);
  background:var(--surface-card);color:var(--text-heading);
  font:var(--text-body-sm-strong);text-decoration:none;
  box-shadow:var(--elevation-overlay);transition:top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus-visible{top:var(--space-sm)}

/* ---------- the column ---------- */

/* .has-panel and .panel-collapsed both live on <html>, set by shell.js. When
   collapsed, both are present — the second rule wins on source order. */
.has-panel body{padding-inline-start:var(--panel-w)}
.panel-collapsed body{padding-inline-start:var(--panel-w-collapsed)}

/* Deliberately no transition on width: animating it forces a whole-page layout
   on every frame, and the body padding that actually reflows the content is
   not animated — so the panel would slide out of step with the content it is
   uncovering. Snapping is both correct and cheaper. The mobile drawer below
   animates transform instead, which is compositable and safe to move. */
.panel{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:40;
  width:var(--panel-w);
  display:flex;flex-direction:column;
  background:var(--surface-compact-card);color:var(--text-compact);
  border-inline-end:1px solid var(--border-compact);
  font:var(--text-ui-body);
}
.panel:focus{outline:none}

.panel-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  min-height:54px;padding:10px var(--space-md);
  border-block-end:1px solid var(--border-compact);
}
.panel-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text-compact);min-width:0}
.panel-brand img{width:28px;height:28px;flex:none}
.panel-brand b{font:var(--text-ui-card-title);white-space:nowrap}

.panel-collapse{
  appearance:none;border:1px solid var(--border-compact);border-radius:var(--radius-control-compact);
  background:var(--surface-compact-card);color:var(--text-compact-muted);cursor:pointer;
  width:32px;height:32px;flex:none;line-height:1;
  transition:var(--transition-control);
}
.panel-collapse:hover{color:var(--text-compact);border-color:var(--border-compact-strong);background:var(--surface-compact-muted)}

/* ---------- nav ---------- */

.panel-nav{flex:1;overflow-y:auto;padding:var(--space-sm)}
.panel-nav ul{list-style:none;margin:0;padding:0}
.panel-item + .panel-item{margin-top:3px}
.panel-item-sep{margin-top:7px;padding-top:7px;border-block-start:1px solid var(--border-compact)}

.panel-link{
  display:flex;align-items:center;gap:var(--space-sm);
  /* Comfortably over the 44px floor the old .btn-nav links kept missing. */
  min-height:38px;padding:7px 9px;
  border-radius:var(--radius-control-compact);
  color:var(--text-compact-muted);font:var(--text-ui-body-strong);
  text-decoration:none;transition:var(--transition-control);
}
.panel-link:hover{background:var(--surface-compact-muted);color:var(--text-compact)}
/* The old nav marked the current page with a gold underline and nothing else.
   This pairs the visual cue with aria-current, set in shell.js. */
.panel-link.is-current{background:var(--surface-card-gold);color:var(--color-gold-deep)}
.panel-icon{display:flex;flex:none;width:20px}
.panel-icon .ic{width:20px;height:20px}
.panel-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.panel-due{display:flex;align-items:center;flex:none}
.panel-due .ic{width:18px;height:18px}

/* Click-to-open sections (Build, Socials). A <button> rather than a link,
   because these go nowhere on their own. */
.panel-disclosure{
  width:100%;appearance:none;border:none;background:transparent;
  cursor:pointer;text-align:start;font:var(--text-body-md-strong);
}
.panel-chev{
  flex:none;color:var(--text-muted);line-height:1;
  transition:transform var(--duration-fast) var(--ease-standard);
}
.panel-item.is-open > .panel-disclosure .panel-chev,
.panel-foot.is-open .panel-chev{transform:rotate(90deg)}

.panel-sub{margin:2px 0 var(--space-xs);display:none}
.panel-item.is-open .panel-sub{display:block}
.panel-sublink{
  min-height:32px;padding-block:5px;
  /* Indent aligns the sub-label with the parent's label, past its icon. */
  padding-inline-start:calc(var(--space-md) + 20px + var(--space-sm));
  font:var(--text-ui-supporting);color:var(--text-compact-muted);
}
.panel-sublink.is-current{background:transparent;color:var(--text-compact);font-weight:var(--weight-semibold)}
.panel-sublink.is-current .panel-label{position:relative}
.panel-sublink.is-current .panel-label::before{
  content:"";position:absolute;inset-inline-start:-14px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--color-gold-deep);
}

/* ---------- foot ---------- */

/* The menu is an overlay, not a disclosure: it opens upward over the nav
   instead of pushing the panel taller, so a two-row panel and a ten-row panel
   behave the same. Hence position:relative here and the drop-up below. */
.panel-foot{
  position:relative;
  padding:var(--space-sm);
  border-block-start:1px solid var(--border-compact);
}
.panel-avatar{
  display:flex;align-items:center;gap:var(--space-sm);width:100%;
  appearance:none;border:none;background:transparent;cursor:pointer;
  padding:5px;min-height:42px;text-align:start;
  border-radius:var(--radius-control-compact);
}
.panel-avatar:hover{background:var(--surface-compact-muted)}
.panel-avatar:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.panel-avatar-face{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--border-compact);border-radius:50%;
  overflow:hidden;background:var(--surface-card-gold);color:var(--color-gold-deep);
  font:var(--text-ui-body-strong);
}
.panel-avatar-face img{width:100%;height:100%;object-fit:cover}
.panel-foot.is-open .panel-avatar{background:var(--surface-compact-muted)}
.panel-greet{
  flex:1;min-width:0;font:var(--text-ui-supporting);color:var(--text-compact-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- account drop-up ---------- */

.panel-menu{
  display:none;
  position:absolute;inset-block-end:100%;inset-inline:var(--space-sm);
  z-index:2;margin-block-end:var(--space-xs);padding:var(--space-xs);
  background:var(--surface-compact-card);
  border:1px solid var(--border-compact);border-radius:var(--radius-card-compact);
  box-shadow:var(--elevation-overlay);
}
.panel-foot.is-open .panel-menu{display:grid}
.panel-menu-item{
  display:flex;align-items:center;gap:var(--space-sm);width:100%;
  appearance:none;border:none;background:transparent;cursor:pointer;
  padding:6px var(--space-sm);min-height:32px;
  border-radius:4px;
  font:var(--text-ui-supporting);color:var(--text-compact);text-align:start;
}
.panel-menu-item:hover{background:var(--surface-compact-muted)}
.panel-menu-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.panel-menu-item[disabled]{opacity:.6;cursor:default}
.panel-menu-icon{flex:none;display:grid;place-items:center}

/* ---------- collapsed ---------- */

.panel-collapsed .panel{width:var(--panel-w-collapsed)}
.panel-collapsed .panel-label,
.panel-collapsed .panel-brand b,
.panel-collapsed .panel-greet,
.panel-collapsed .panel-chev,
.panel-collapsed .panel-sub{display:none}
.panel-collapsed .panel-top{justify-content:center;flex-wrap:wrap;gap:var(--space-xs)}
.panel-collapsed .panel-link{justify-content:center;padding-inline:0}
.panel-collapsed .panel-collapse{transform:rotate(180deg)}
/* Collapsed, the greeting goes and the avatar is the only thing in the foot.
   The menu keeps its own width and hangs off that one button, rather than the
   controls spilling out as a stack the way they used to. */
.panel-collapsed .panel-avatar{justify-content:center;padding-inline:0}
.panel-collapsed .panel-menu{inset-inline-start:var(--space-xs);inset-inline-end:auto;min-width:190px}
/* Only the icon survives, so the due mark needs its own room beside it. */
.panel-collapsed .panel-due{position:absolute;inset-inline-end:10px}
.panel-collapsed .panel-link{position:relative}

/* ---------- mobile drawer ---------- */

.panel-bar{display:none}
.panel-scrim{display:none}

@media (max-width:860px){
  .has-panel body,.panel-collapsed body{padding-inline-start:0;padding-block-start:var(--panel-bar-h)}

  .panel-bar{
    display:flex;align-items:center;gap:var(--space-md);
    position:fixed;inset-block-start:0;inset-inline:0;z-index:45;height:var(--panel-bar-h);
    padding-inline:var(--space-md);
    background:var(--surface-compact-card);border-block-end:1px solid var(--border-compact);
    color:var(--text-compact);font:var(--text-ui-body);
  }
  .panel-burger{
    appearance:none;border:1px solid var(--border-compact);border-radius:var(--radius-control-compact);
    background:var(--surface-compact-card);color:var(--text-compact);cursor:pointer;
    width:44px;height:44px;flex:none;font-size:20px;line-height:1;
  }

  .panel{
    width:min(280px,86vw);
    transform:translateX(-102%);
    box-shadow:var(--elevation-overlay);
    transition:transform var(--duration-fast) var(--ease-standard);
  }
  /* The panel mirrors to the right edge in RTL, so the off-screen direction
     has to mirror with it. */
  [dir="rtl"] .panel{transform:translateX(102%)}
  .panel-open .panel{transform:none}

  .panel-scrim{
    display:block;position:fixed;inset:0;z-index:39;
    background:var(--scrim-overlay);opacity:0;pointer-events:none;
    transition:opacity var(--duration-fast) var(--ease-standard);
  }
  .panel-open .panel-scrim{opacity:1;pointer-events:auto}

  /* Collapsing is a desktop affordance; the drawer is already all-or-nothing. */
  .panel-collapse{display:none}
  .panel-collapsed .panel-label,
  .panel-collapsed .panel-brand b,
  .panel-collapsed .panel-greet,
  .panel-collapsed .panel-chev,
  .panel-collapsed .panel-sub{display:revert}
  .panel-collapsed .panel-avatar{justify-content:flex-start;padding:var(--space-xs)}
  .panel-collapsed .panel-menu{inset-inline:var(--space-sm);min-width:0}
  .panel-collapsed .panel-link{justify-content:flex-start;padding-inline:var(--space-md)}
  .panel-collapsed .panel-due{position:static}

  .panel-link,.panel-avatar,.panel-menu-item{min-height:var(--touch-target-min)}
}

@media (pointer:coarse) and (min-width:861px){
  .panel-link,.panel-avatar,.panel-menu-item{min-height:var(--touch-target-min)}
  .panel-collapse{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .panel,.panel-scrim,.skip-link{transition:none}
}