/* Shared chrome + server-page components, on the parchment design system.
   Tokens come from tokens-parchment.css (loaded first, at :root, on every page
   via head.php). Per-page stylesheets (landing-intro.css, creation.css,
   home.css) load after this and layer on top. */

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-ui);min-height:100vh;overflow-x:hidden;
}

/* A link's default colour. The app had none, so any anchor nobody had styled by
   hand — the journal's "Write one", for instance — came out in the browser's
   #0000EE on parchment. The design system's base has carried this rule all
   along; the app just never picked it up. */
a{color:var(--text-action)}
a:hover{color:var(--accent-primary)}
/* The wordmark is insignia, not a link that changes colour under the pointer.
   The generic a:hover above out-specifies .nav-logo, so it needs saying. */
.nav-logo:hover{color:var(--text-accent)}

/* NAV */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;height:var(--nav-height);
  background:rgba(253,248,236,0.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-hairline);
}
.nav-logo{flex:0 1 auto;min-width:0;font-family:var(--font-display);font-size:var(--fs-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-accent);text-decoration:none}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-links a{font-family:var(--font-ui);font-size:var(--fs-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);text-decoration:none;transition:color var(--dur-base) var(--ease-standard)}
.nav-links a:hover,.nav-links a.active{color:var(--text-accent)}
.nav-user{font-family:var(--font-ui);font-size:var(--fs-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.nav-logout{background:none;border:none;cursor:pointer;font-family:var(--font-ui);font-size:var(--fs-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);transition:color var(--dur-base) var(--ease-standard)}
.nav-logout:hover{color:var(--text-accent)}
.nav-cta{
  font-family:var(--font-ui);font-size:var(--fs-2xs);letter-spacing:var(--track-label);text-transform:uppercase;
  background:var(--accent-primary);color:var(--text-on-accent);border:1px solid var(--accent-primary);border-radius:var(--radius-sm);
  padding:7px 18px;text-decoration:none;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.nav-cta:hover{background:var(--accent-primary-hover);border-color:var(--accent-primary-hover)}
.nav-actions{display:flex;align-items:center;gap:1.4rem}
.nav-actions a:not(.nav-cta){font-family:var(--font-ui);font-size:var(--fs-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);text-decoration:none;transition:color var(--dur-base) var(--ease-standard)}
.nav-actions a:not(.nav-cta):hover{color:var(--text-accent)}

/* PAGE SHELL */
main{max-width:var(--width-content);margin:0 auto;padding:calc(var(--nav-height) + var(--space-11)) var(--gutter-page) var(--space-12)}
.page-header{text-align:center;margin-bottom:var(--space-9)}
.page-header h1{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:500;color:var(--text-strong);letter-spacing:var(--track-title);margin-bottom:var(--space-3)}
.page-header p{font-family:var(--font-prose);font-size:var(--fs-md);font-style:italic;color:var(--text-muted)}

/* AUTH / INFO CARD */
/* Frame comes from .ag-panel in components.css; this is the auth card's own
   measure and elevation. */
.auth-card{
  box-shadow:var(--shadow-sm);padding:var(--space-9) var(--space-8);max-width:420px;margin:0 auto;
}
.auth-card h1{font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:var(--track-title);color:var(--text-strong);margin-bottom:var(--space-8);text-align:center}

/* FORMS */
.field{margin-bottom:var(--space-6)}
.field label{display:block;font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)}
.field input{
  width:100%;font-family:var(--font-ui);font-size:var(--fs-md);color:var(--text-strong);
  background:var(--surface-inset);border:1px solid var(--border-default);border-radius:var(--radius-sm);
  padding:10px 12px;outline:none;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.field input:focus{border-color:var(--accent-primary);box-shadow:var(--focus-ring)}
/* Not scoped to .field — guilds.php and account.php use it standalone too. */
.hint{font-family:var(--font-prose);font-size:var(--fs-xs);color:var(--text-muted);font-style:italic;margin-top:var(--space-2)}
.field>div{color:var(--text-body);font-size:var(--fs-md)}
.form-actions{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5);align-items:stretch}
.form-actions .btn-primary{text-align:center}
.form-alt{text-align:center;font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--space-6)}
.form-alt a{color:var(--text-action);text-decoration:none}
.form-alt a:hover{text-decoration:underline}

/* BANNERS */
.banner{border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:var(--space-6);font-family:var(--font-ui);font-size:var(--fs-sm);line-height:1.5}
.banner-error{background:var(--status-error-bg);border:1px solid var(--status-error-border);color:var(--status-error-text)}
.banner-ok{background:var(--status-ok-bg);border:1px solid var(--status-ok-border);color:var(--status-ok-text)}
.banner ul{margin:0;padding-left:1.1rem}

/* SIMPLE LISTS (guilds page) */
.card-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-8) 0}
.card-list li{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:var(--space-6) var(--space-7);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6)}
.card-list .guild-name{font-family:var(--font-display);font-size:var(--fs-sm);letter-spacing:var(--track-title);color:var(--text-strong)}
.card-list .guild-meta{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-muted)}
.card-list code,code{font-family:var(--font-display);letter-spacing:0.15em;color:var(--text-accent);background:var(--surface-sunken);padding:2px 8px;border-radius:var(--radius-xs)}
.stack-forms{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-top:var(--space-11)}
.stack-forms .auth-card{margin:0;max-width:none}
.empty-note{font-family:var(--font-prose);font-style:italic;color:var(--text-muted);text-align:center;margin:var(--space-8) 0}

/* XP / CHARACTER VIEW (account.php) */
.auth-card + .auth-card{margin-top:var(--space-8)}
.section-label-row{font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-accent);margin:var(--space-8) 0 var(--space-4)}
.xp-main{display:flex;align-items:center;gap:var(--space-7)}
.xp-level{display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:74px;padding:var(--space-4) var(--space-5);border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:var(--surface-raised)}
.xp-level-word{font-family:var(--font-display);font-size:var(--fs-3xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.xp-level-num{font-family:var(--font-display);font-size:var(--fs-3xl);line-height:1.05;color:var(--text-strong)}
.xp-main-meter{flex:1;min-width:0}
.xp-main-meta{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-3);font-family:var(--font-ui);font-size:var(--fs-xs);color:var(--text-muted)}
/* .ag-meter: the pill shape, the overflow clip and the --fill-meter gradient
   all come from components.css. The height and the ground are the account
   page's own. */
.xp-bar{height:6px;background:var(--surface-sunken)}
.xp-track-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-4)}
.xp-track-list li{display:grid;grid-template-columns:minmax(90px,1fr) 2fr minmax(120px,auto);align-items:center;gap:var(--space-5)}
.xp-track-name{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--text-strong);text-transform:capitalize}
.xp-track-meta{font-family:var(--font-ui);font-size:var(--fs-xs);color:var(--text-muted);text-align:right}

/* XP SANDBOX (only rendered when APP_XP_DEBUG is on) */
.xp-sandbox{max-width:720px}
.xp-quick{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.xp-quick .btn-secondary{font-size:var(--fs-sm);padding:8px 14px}
.xp-ledger{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-ui);font-size:var(--fs-xs)}
.xp-ledger li{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:baseline;padding:var(--space-3) var(--space-4);background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--radius-xs)}
.xp-ledger-amt{font-family:var(--font-display);color:var(--text-strong);min-width:52px}
.xp-ledger-src{color:var(--text-accent)}
.xp-ledger-trk,.xp-ledger-main{color:var(--text-muted)}
.xp-ledger-at{margin-left:auto;color:var(--text-muted)}

/* FOOTER */
footer{
  padding:2.5rem;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;border-top:1px solid var(--border-hairline);
}
.footer-logo{font-family:var(--font-display);font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.footer-copy{font-family:var(--font-prose);font-size:var(--fs-sm);color:var(--text-muted);font-style:italic}

/* The nav is a fixed-height flex row, and flex items will not shrink below
   their text, so past four links the actions column starts overlapping the
   links. Tighten the gaps first, then drop the display name — it is a nicety,
   not navigation — before anything can collide. */
@media(max-width:1080px){
  .site-nav{padding:0 1.5rem}
  .nav-links{gap:1.25rem}
  .nav-actions{gap:1rem}
}
@media(max-width:768px){
  .nav-user{display:none}
}

@media(max-width:560px){
  .site-nav{padding:0 var(--gutter-page)}
  .nav-links{display:none}
  main{padding-top:calc(var(--nav-height) + var(--space-8))}
  .stack-forms{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start}
  .xp-track-list li{grid-template-columns:1fr;gap:var(--space-2)}
  .xp-track-meta{text-align:left}
  .xp-ledger-at{margin-left:0}
}

/* ==========================================================================
   THE MOBILE SHELL
   Below sm, the desktop nav is not narrowed — it is replaced. Until now the
   links were simply hidden here, which left a phone with no way at all to reach
   Guilds, the Journal or Quests: you could get to the logo and to Log out.

   The design's answer, and this one: identity in the top-left where the wordmark
   sits on desktop, a drawer for everything occasional, and a fixed bottom bar
   carrying the three places you actually go. Every target is at least 44px.
   ========================================================================== */

.nav-me, .nav-more, .nav-drawer, .tabbar { display: none; }

@media(max-width:560px){
  .site-nav{
    height:var(--nav-height-mobile);padding:0 var(--space-4) 0 var(--gutter-page);
    flex-wrap:nowrap;align-items:center;gap:var(--space-4);
  }
  /* Hidden only when the mobile shell is actually there to replace them. The
     shell renders for a logged-in user; a visitor still needs the wordmark, Log
     in and Sign Up, and hiding those left them with an empty bar and no way in. */
  .nav-links{ display:none }
  .has-mobile-shell .nav-logo,
  .has-mobile-shell .nav-actions{ display:none }
  /* Logged out, the bar is just the wordmark and the two ways in. */
  .site-nav:not(.has-mobile-shell){ flex-wrap:nowrap;gap:var(--space-5) }
  .site-nav:not(.has-mobile-shell) .nav-logo{
    flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .site-nav:not(.has-mobile-shell) .nav-actions{ flex:0 0 auto;gap:var(--space-5) }

  /* Identity: who you are and how far along, in one tap-target to your account. */
  .nav-me{
    display:flex;align-items:center;gap:var(--space-5);
    min-height:44px;flex:1 1 auto;min-width:0;text-decoration:none;
  }
  .nav-me-crest{
    flex:0 0 auto;width:28px;height:28px;border-radius:var(--radius-pill);
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--gold-700);background:var(--surface-gold-quiet);
    font-family:var(--font-display);font-size:var(--fs-2xs);color:var(--text-accent);
  }
  .nav-me-text{ display:flex;flex-direction:column;min-width:0 }
  .nav-me-name{
    font-family:var(--font-display);font-size:var(--fs-sm);
    letter-spacing:var(--track-title);color:var(--text-strong);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .nav-me-meta{
    font-size:var(--fs-3xs);letter-spacing:var(--track-label);
    text-transform:uppercase;color:var(--text-muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  .nav-more{
    display:inline-flex;align-items:center;flex:0 0 auto;
    min-height:44px;padding:0 var(--space-6);cursor:pointer;
    font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:600;
    letter-spacing:var(--track-label);text-transform:uppercase;
    border:1px solid var(--border-rule);border-radius:var(--radius-sm);
    background:transparent;color:var(--text-body);
  }
  .nav-more[aria-expanded="true"]{
    border-color:var(--accent-primary);
    background:var(--surface-gold-quiet);color:var(--text-accent);
  }

  /* The drawer hangs off the bottom of the fixed bar, so it overlays the page
     rather than pushing it — the page beneath keeps its scroll position. */
  .nav-drawer{
    display:block;position:fixed;top:var(--nav-height-mobile);left:0;right:0;z-index:99;
    padding:var(--space-2) var(--space-5) var(--space-6);
    background:rgba(253,248,236,0.96);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-hairline);
  }
  .nav-drawer[hidden]{ display:none }
  .nav-drawer-label{
    margin:var(--space-5) var(--space-2) var(--space-4);
    font-family:var(--font-display);font-size:var(--fs-3xs);
    letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);
  }
  .nav-drawer-grid{ display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) }
  .nav-drawer-grid a{
    display:flex;flex-direction:column;gap:var(--space-1);justify-content:center;
    min-height:56px;padding:10px var(--space-5);text-decoration:none;
    background:var(--surface-card);border:1px solid var(--border-hairline);
    border-radius:var(--radius-sm);
  }
  .nav-drawer-name{ font-size:var(--fs-sm);font-weight:600;color:var(--text-strong) }
  .nav-drawer-note{ font-size:var(--fs-xs);color:var(--text-muted) }
  .nav-drawer-out{ margin-top:var(--space-4) }
  .nav-drawer-out button{
    width:100%;min-height:44px;cursor:pointer;
    font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:600;
    background:none;border:1px solid var(--border-rule);border-radius:var(--radius-sm);
    color:var(--text-body);
  }

  /* The bottom bar. Plain links, so navigation survives with JS switched off —
     which the drawer does not, and does not need to. */
  .tabbar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;
    justify-content:center;
    background:rgba(253,248,236,0.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--border-hairline);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .tabbar a{
    flex:1 1 0;max-width:calc(440px / 3);min-height:56px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:600;
    color:var(--text-muted);text-decoration:none;
  }
  .tabbar a.is-on{
    font-weight:700;color:var(--accent-primary);
    box-shadow:inset 0 2px 0 var(--accent-primary);
  }

  /* Clear the bar. Without this the last row of every page sits under it, and
     on the journal that row is a tick you cannot reach. */
  main{ padding-top:calc(var(--nav-height-mobile) + var(--space-8)) }
  /* Only the footer needs to clear the bar — it is what comes last. Padding main
     as well just left a hole above it. */
  footer{ padding-bottom:calc(56px + var(--space-8) + env(safe-area-inset-bottom,0)) }
}