/* ============================================================
   FFXI Crafting — shared stylesheet
   ============================================================ */

/* --- Tokens (dark default) --- */
:root{
 --bg:#0c1728;--panel-top:#1b3257;--panel-bot:#11223c;--frame:#8ea6cc;--rule:#31496f;
 --ink:#ece6d6;--ink-soft:#a9b5cb;--ink-faint:#74829e;--link:#9fd0ff;
 --gil:#e8c44a;--gain:#74d3a0;--loss:#ff8f7d;--best:#7fd6a2;
 --fire:#ff7a5c;--ice:#7fd2ff;--wind:#8ce0a8;--earth:#d9b678;--lightning:#c9a0ff;--water:#6fb8ff;--light:#f2e6c0;--dark:#b492d8;
 --wood:#8a6a3f;--smith:#8d94a3;--gold:#e0b64c;--cloth:#c98fb5;--leather:#b5763f;--bone:#ded3bb;--alchemy:#7fc4a8;--cook:#e08f6a;
 --sidebar-bg:#111e35;
 --font-display:"Marcellus",Georgia,serif;--font-body:"Atkinson Hyperlegible",system-ui,sans-serif;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* --- Light theme --- */
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){
 --bg:#eceff5;--panel-top:#fff;--panel-bot:#f3f6fb;--frame:#2f4570;--rule:#ccd6e6;
 --ink:#16213a;--ink-soft:#43506b;--ink-faint:#6e7a94;--link:#1a5cb0;--gil:#a8791a;--gain:#12734a;--loss:#b23a2a;--best:#12734a;
 --fire:#c2432a;--ice:#1f7fae;--wind:#2d8a54;--earth:#8a6a2a;--lightning:#6b45b0;--water:#1c69b8;--light:#9a8536;--dark:#6a4a96;
 --wood:#6b4f2c;--smith:#5b6474;--gold:#a1791d;--cloth:#9c5d87;--leather:#8a5526;--bone:#8d8265;--alchemy:#2f7f63;--cook:#b05c34;
 --sidebar-bg:#e2e7f0}}
:root[data-theme="light"]{
 --bg:#eceff5;--panel-top:#fff;--panel-bot:#f3f6fb;--frame:#2f4570;--rule:#ccd6e6;
 --ink:#16213a;--ink-soft:#43506b;--ink-faint:#6e7a94;--link:#1a5cb0;--gil:#a8791a;--gain:#12734a;--loss:#b23a2a;--best:#12734a;
 --fire:#c2432a;--ice:#1f7fae;--wind:#2d8a54;--earth:#8a6a2a;--lightning:#6b45b0;--water:#1c69b8;--light:#9a8536;--dark:#6a4a96;
 --wood:#6b4f2c;--smith:#5b6474;--gold:#a1791d;--cloth:#9c5d87;--leather:#8a5526;--bone:#8d8265;--alchemy:#2f7f63;--cook:#b05c34;
 --sidebar-bg:#e2e7f0}

/* --- Reset --- */
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--link) 35%,transparent)}
a:hover{border-bottom-color:var(--link)}
:focus-visible{outline:2px solid var(--gil);outline-offset:2px;border-radius:3px}
img{max-width:100%}

/* --- Top bar --- */
.top-bar{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);
 max-width:1400px;width:92%;margin:0 auto}
.top-bar .logo{font-family:var(--font-display);font-size:1.15rem;color:var(--ink);border-bottom:none;white-space:nowrap}
.top-bar .logo:hover{color:var(--gil)}
.hamburger{display:none;background:none;border:1px solid var(--rule);color:var(--ink-soft);border-radius:6px;
 padding:6px 8px;cursor:pointer;font-size:1.1rem;line-height:1;flex-shrink:0}
.hamburger:hover{color:var(--ink);border-color:var(--frame)}
.top-bar .act{margin-left:auto;flex-shrink:0}

/* --- Vana'diel clock --- */
.vana-clock{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-faint);white-space:nowrap;flex-shrink:0;
 border:1px solid var(--rule);border-radius:999px;padding:4px 10px;font-variant-numeric:tabular-nums}
.vana-clock .vana-day{display:inline-flex;align-items:center;gap:4px}
.vana-clock .vana-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.vana-clock .vana-time{color:var(--ink-soft);font-weight:700}

/* --- Search --- */
.search-wrap{position:relative;flex:1;max-width:420px;min-width:0}
#search{width:100%;font:inherit;color:var(--ink);background:color-mix(in srgb,var(--bg) 55%,transparent);
 border:1px solid var(--rule);border-radius:6px;padding:7px 30px 7px 12px;font-size:.88rem}
#search:focus{border-color:var(--gil);outline:none}
#search::placeholder{color:var(--ink-faint)}
.search-wrap .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.68rem;
 color:var(--ink-faint);border:1px solid var(--rule);border-radius:3px;padding:0 5px;pointer-events:none;line-height:1.6}
.search-wrap:focus-within .kbd{display:none}
.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;
 background:var(--panel-top);border:1px solid var(--frame);border-radius:8px;
 max-height:min(400px,60vh);overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
a.sr-item{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--ink);
 border-bottom:1px solid var(--rule);font-size:.88rem}
a.sr-item:last-child{border-bottom:none}
a.sr-item:hover,a.sr-item.active{background:color-mix(in srgb,var(--gil) 14%,transparent)}
.sr-type{color:var(--ink-faint);font-size:.7rem;margin-left:auto;white-space:nowrap}

/* --- Layout grid --- */
.site-layout{display:grid;grid-template-columns:210px 1fr;gap:28px;
 max-width:1400px;width:92%;margin:0 auto;padding:0 16px;align-items:start}

/* --- Sidebar --- */
.sidebar{position:sticky;top:16px;align-self:start;max-height:calc(100vh - 80px);
 overflow-y:auto;padding:16px 0;scrollbar-width:thin}
.sb-server{padding:10px 12px;margin-bottom:8px;background:color-mix(in srgb,var(--gil) 8%,transparent);
 border:1px solid color-mix(in srgb,var(--gil) 25%,transparent);border-radius:6px;font-size:.82rem}
.sb-server strong{font-family:var(--font-display);font-weight:400;color:var(--gil);display:block;font-size:.95rem}
.sb-server span{color:var(--ink-faint);font-size:.75rem}
.sb-section{margin-bottom:16px}
.sb-heading{font-family:var(--font-display);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
 color:var(--ink-faint);padding:6px 12px 4px;margin-bottom:2px}
.sidebar a{display:block;padding:5px 12px;color:var(--ink-soft);border-bottom:none;border-radius:4px;font-size:.88rem;
 border-left:2px solid transparent;margin-bottom:1px}
.sidebar a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.sidebar a.active{color:var(--gil);border-left-color:var(--gil);background:color-mix(in srgb,var(--gil) 10%,transparent);font-weight:700}
.sb-craft{display:flex;align-items:center;gap:6px}
.sb-craft-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sb-craft svg{width:16px;height:16px;flex-shrink:0;color:var(--c)}

/* --- Main content --- */
.main{min-width:0;padding:16px 0 70px}

/* --- Breadcrumbs --- */
.breadcrumbs{font-size:.82rem;color:var(--ink-faint);margin-bottom:16px;padding:0}
.breadcrumbs a{color:var(--ink-faint);border-bottom:none}
.breadcrumbs a:hover{color:var(--link)}
.breadcrumbs .sep{margin:0 6px;opacity:.5}

/* --- Panels --- */
.panel{background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));border:1px solid var(--frame);border-radius:8px;
 box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--rule);margin-bottom:16px}
.pad{padding:20px 22px}

/* --- Typography --- */
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0 0 .25em;line-height:1.1}
h2{font-family:var(--font-display);font-weight:400;font-size:1.2rem;margin:1.4em 0 .5em;color:var(--ink);
 padding-left:12px;border-left:3px solid var(--gil)}
h2:first-child{margin-top:0}
h3{font-family:var(--font-display);font-weight:400;font-size:1rem;margin:1em 0 .4em;color:var(--ink)}
.lede{color:var(--ink-soft);max-width:66ch;margin:0}
p{max-width:72ch;line-height:1.65}
code{font-family:ui-monospace,monospace;font-size:.88em;background:color-mix(in srgb,var(--bg) 55%,transparent);padding:2px 6px;border-radius:3px}

/* --- Tables --- */
table{width:100%;border-collapse:collapse;font-size:.91rem}
th{text-align:left;font-weight:600;color:var(--ink-faint);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
 padding:8px 10px;border-bottom:2px solid var(--gil);background:color-mix(in srgb,var(--panel-top) 80%,var(--bg))}
td{padding:7px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:hover td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-scroll{overflow-x:auto}

/* --- Infobox --- */
.infobox{float:right;width:260px;margin:0 0 16px 20px;background:var(--panel-top);
 border:1px solid var(--frame);border-radius:8px;font-size:.88rem;overflow:hidden}
.infobox-head{background:var(--gil);color:#0c1728;padding:8px 14px;font-family:var(--font-display);font-weight:400;font-size:1rem}
.infobox-row{display:flex;padding:6px 14px;border-bottom:1px solid var(--rule)}
.infobox-row:last-child{border-bottom:none}
.infobox-label{color:var(--ink-faint);width:80px;flex-shrink:0;font-size:.8rem}
.infobox-val{flex:1}

/* --- Buttons --- */
.act{background:none;border:1px solid var(--rule);color:var(--ink-soft);border-radius:999px;padding:7px 13px;font:inherit;font-size:.86rem;cursor:pointer}
.act:hover{color:var(--ink);border-color:var(--frame)}
.act.on{border-color:var(--gil);color:var(--gil)}

/* --- Badges and pills --- */
.pill{display:inline-block;font-size:.68rem;border:1px solid var(--rule);border-radius:4px;padding:0 5px;margin-left:4px;color:var(--ink-faint)}
.pill.ki{border-color:var(--lightning);color:var(--lightning)}
.pill.wotg{border-color:var(--gil);color:var(--gil)}
.pill.nm{border-color:var(--fire);color:var(--fire)}
.pill.best{border-color:var(--best);color:var(--best)}
.badge{display:inline-block;font-size:.72rem;border-radius:999px;padding:2px 8px;border:1px solid var(--rule);color:var(--ink-faint);margin-left:6px}
.badge.live{border-color:var(--best);color:var(--best)}

/* --- Gil display --- */
.gil{display:inline-flex;align-items:center;gap:4px;color:var(--gil);font-variant-numeric:tabular-nums}
.gil svg{width:12px;height:12px}

/* --- Craft buttons (shared on calc/profit/shopping) --- */
.crafts{display:flex;gap:8px;overflow-x:auto;flex-wrap:wrap;padding:14px 0 0}
.craft{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 12px 7px 8px;border:1px solid var(--rule);border-radius:999px;
 background:transparent;color:var(--ink);font:inherit;font-size:.86rem;cursor:pointer;white-space:nowrap}
.craft:hover{border-color:var(--c,var(--frame))}
.craft[aria-pressed="true"]{border-color:var(--c,var(--gil));background:color-mix(in srgb,var(--c,var(--gil)) 16%,transparent);font-weight:700}
.craft svg{width:20px;height:20px;flex:0 0 20px;color:var(--c)}

/* --- Related / see-also --- */
.see-also{border-top:1px solid var(--rule);padding-top:16px;margin-top:24px}
.see-also h2{border-left:none;padding-left:0;font-size:1rem}
.see-also-links{display:flex;gap:12px;flex-wrap:wrap}
.see-also-links a{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--rule);
 border-radius:6px;font-size:.88rem;color:var(--ink-soft);border-bottom:none}
.see-also-links a:hover{border-color:var(--gil);color:var(--ink)}

/* --- Footer --- */
.site-footer{color:var(--ink-faint);font-size:.85rem}
.site-footer .made{font-family:var(--font-display);font-size:1.05rem;color:var(--ink);margin:0 0 .6em}
.site-footer .made strong{font-weight:400;color:var(--gil)}
.site-footer p{margin:0;max-width:74ch}

/* --- Cards (homepage, crafts hub) --- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.card{display:block;border:1px solid var(--rule);border-radius:8px;padding:18px;text-decoration:none;color:inherit;
 background:color-mix(in srgb,var(--bg) 35%,transparent)}
a.card{border-bottom:none}
a.card:hover{border-color:var(--gil)}
.card h3{font-family:var(--font-display);font-weight:400;font-size:1.2rem;margin:0 0 .3em;border-left:none;padding-left:0}
.card p{margin:0;color:var(--ink-soft);font-size:.92rem}

/* --- Stat blocks --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px;margin-top:6px}
.stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.5rem}
.stat span{color:var(--ink-faint);font-size:.78rem}

/* --- Collapsible details --- */
details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:14px 22px;
 font-family:var(--font-display);font-size:1.2rem}
details>summary::-webkit-details-marker{display:none}
.chev{width:12px;height:12px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
 transform:rotate(-45deg);transition:transform .15s}
details[open]>summary .chev{transform:rotate(45deg)}
summary .meta{margin-left:auto;font-family:var(--font-body);font-size:.85rem;color:var(--ink-faint);font-weight:400}

/* --- Utilities --- */
ul{padding-left:1.4em}
li{margin-bottom:.4em}
.hide{display:none!important}
.positive{color:var(--gain)}
.negative{color:var(--loss)}

/* --- Responsive --- */
@media(max-width:820px){
 .hamburger{display:flex;align-items:center;justify-content:center}
 .site-layout{grid-template-columns:1fr;gap:0;padding:0 16px}
 .sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:100;background:var(--sidebar-bg);
  transform:translateX(-100%);transition:transform .2s ease;padding:16px;
  border-right:1px solid var(--rule);max-height:100vh;overflow-y:auto}
 .sidebar.open{transform:translateX(0)}
 .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}
 .sidebar-overlay.open{display:block}
 .pad{padding:16px}
 .infobox{float:none;width:100%;margin:0 0 16px}
 .hide-sm{display:none}
 .top-bar{gap:10px}
 th,td{padding:5px 6px}
}
@media(min-width:821px){
 .sidebar-overlay{display:none!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}