/* Simple Hack's sketchbook. Loaded only by EVENTS=hosted chrome.
   Caveat and Kalam are bundled under the SIL Open Font License (fonts/*-OFL.txt).
   Layout and application hooks remain in their existing pages. */
@font-face { font-family:Caveat; src:url('fonts/caveat.woff2') format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:Kalam; src:url('fonts/kalam-light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:Kalam; src:url('fonts/kalam-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:Kalam; src:url('fonts/kalam-bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

html.sh-hack:not(.hack-story), html.sh-hack :is(.sh-header,.sh-footer) {
  --paper:#f4efdf; --paper-hi:#fcf8ed; --paper-lo:#e8dfcd; --paper-ink:#d9cfbb;
  --line:#2b2925; --line-soft:#615b51; --line-faint:#71695c;
  --brand:#d15d48; --brand-2:#267b79;
  --crayon-red:#d15d48; --crayon-teal:#267b79; --crayon-indigo:#4a49a8;
  --crayon-orange:#e9a45f; --crayon-yellow:#f2c94c; --crayon-grass:#86ab74; --crayon-blush:#ee8f92;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive; --note:'Kalam','Segoe Print',cursive;
  --font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --wobble:255px 18px 225px 18px / 18px 225px 18px 255px;
  --radius:var(--wobble); --bg:var(--paper); --surface:var(--paper-hi); --grid:var(--paper-lo);
  --text:var(--line); --text-secondary:var(--line-soft); --dim:var(--line-faint);
  --border:var(--paper-ink); --border-hi:var(--line-soft);
  --accent:#a33f31; --accent-hover:#823024; --on-accent:var(--paper-hi);
  --accent-2:#216c6a; --accent-soft:color-mix(in srgb,var(--brand) 12%,var(--paper));
  --error:#a33f31; --success:#216c6a;
  --header-bg:var(--paper); --event-page:var(--paper); --event-warm:var(--crayon-yellow);
  --event-wash:var(--accent-soft); --shadow:2px 3px 0 var(--paper-ink);
  color-scheme:light;
}
html.sh-hack:not(.hack-story)[data-theme="dark"], html.sh-hack[data-theme="dark"] :is(.sh-header,.sh-footer) {
  --paper:#262329; --paper-hi:#302c33; --paper-lo:#1e1c21; --paper-ink:#57515c;
  --line:#ece6d6; --line-soft:#c3bbaf; --line-faint:#b1a99c;
  --accent:#ed9c8c; --accent-hover:#f4b8ac; --on-accent:#262329; --accent-2:#83c2bf;
  --error:#f39da0; --success:#a7cca0; color-scheme:dark;
}
/* Event seed stays identical across public page, lists and the fallback icon.
   Text ink is darkened on paper, lifted on night paper, including yellow. */
html.sh-hack:not(.hack-story) :is([data-event-color],.sh-event-default) {
  --accent:color-mix(in srgb,var(--event-color,#d15d48) 50%,#000);
  --accent-hover:color-mix(in srgb,var(--event-color,#d15d48) 40%,#000);
  --accent-soft:color-mix(in srgb,var(--event-color,#d15d48) 13%,var(--paper));
  --event-wash:var(--accent-soft); --event-warm:var(--event-color,#f2c94c);
}
html.sh-hack:not(.hack-story)[data-theme="dark"] :is([data-event-color],.sh-event-default) {
  --accent:color-mix(in srgb,var(--event-color,#d15d48) 65%,#fff);
  --accent-hover:color-mix(in srgb,var(--event-color,#d15d48) 50%,#fff);
}
html.sh-hack:not(.hack-story) body { background:var(--paper); color:var(--line); font:16px/1.6 var(--font); }
html.sh-hack:not(.hack-story) body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.sh-hack:not(.hack-story) :is(h1,h2,h3,h4,legend) { font-family:var(--hand); letter-spacing:0; line-height:1.15; overflow-wrap:anywhere; }
html.sh-hack:not(.hack-story) h1 { font-size:clamp(36px,7vw,56px); }
html.sh-hack:not(.hack-story) h2 { font-size:28px; }
html.sh-hack:not(.hack-story) h3 { font-size:24px; }
html.sh-hack:not(.hack-story) :is(button,.btn,.tab,.chip,.sh-btn,.sh-dlg-btn,label,summary,.sh-nav,.sh-brand,.sh-links,.sh-theme-menu,.stat .l) {
  font-family:var(--note); font-size:17px; letter-spacing:0; line-height:1.4;
}
html.sh-hack:not(.hack-story) :is(.btn,button.btn,a.btn,.sh-btn,.sh-dlg-btn) {
  min-height:44px; border:1.5px solid var(--accent); border-radius:var(--wobble);
  box-shadow:2px 3px 0 var(--paper-ink); white-space:normal; text-align:center;
}
html.sh-hack:not(.hack-story) :is(.btn,.sh-btn,.sh-dlg-btn):hover { box-shadow:1px 1px 0 var(--paper-ink); }
html.sh-hack:not(.hack-story) :is(.btn.ghost,.sh-dlg-btn) { background:var(--paper-hi); color:var(--line); border-color:var(--line-soft); }
html.sh-hack:not(.hack-story) :is(.btn.danger,.banner) { color:var(--error); border-color:var(--error); }
html.sh-hack:not(.hack-story) :is(.btn.danger,.btn.ghost):hover { background:var(--paper-lo); }
html.sh-hack:not(.hack-story) :is(button,.tab,.text-btn,.auth-secondary,.back,a.hit,.gcard-open,summary,.sh-theme-toggle) { min-height:44px; }
html.sh-hack:not(.hack-story) :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.in,.auth-input input) {
  font:16px/1.5 var(--font); min-height:44px; max-width:100%; min-width:0; color:var(--line);
}
html.sh-hack:not(.hack-story) :is(input.in,textarea.in,select.in,.sh-dlg-input) {
  background:var(--paper-hi); border:1.5px solid var(--line-soft); border-radius:12px 5px 14px 6px;
}
html.sh-hack:not(.hack-story) :is(.auth-input,.coc,.box,.card,.gcard,.sponsor,.results-row,.banner,.sh-dlg,:where(#hack-tour),.chip) {
  border-radius:var(--wobble); border-width:1.5px; border-color:var(--paper-ink); background:var(--paper-hi); box-shadow:var(--shadow);
}
html.sh-hack:not(.hack-story) :is(.card,.box,.gcard,.sponsor) { border-color:var(--line-soft); }
html.sh-hack:not(.hack-story) .card h2 { font-size:26px; }
html.sh-hack:not(.hack-story) :is(.stats,.banner,.sticky,.callout) { background:var(--accent-soft); border-radius:7px 3px 9px 4px; }
html.sh-hack:not(.hack-story) .stats { padding:10px 14px; border:1px dashed var(--line-soft); }
html.sh-hack:not(.hack-story) :is(.stat .n,table,.score,.results-rank,.results-tie-note,input[type=number],.judge-summary) { font-family:var(--font); font-variant-numeric:tabular-nums; }
html.sh-hack:not(.hack-story) :is(table,.coc,.desc,.entry-ro,.announcement-body,.hint,.code,pre) { line-height:1.6; }
html.sh-hack:not(.hack-story) :is(th,td) { border-color:var(--paper-ink); }
html.sh-hack:not(.hack-story) th { background:var(--paper-lo); }
html.sh-hack:not(.hack-story) .tabs { border-bottom:1.5px dashed var(--line-soft); gap:6px; padding:4px 0; }
html.sh-hack:not(.hack-story) .tab { border-radius:12px 4px 14px 5px; }
html.sh-hack:not(.hack-story) .sh-header { border:0; border-bottom:1.5px dashed var(--line-soft); }
html.sh-hack:not(.hack-story) .sh-footer { border:0; border-top:1.5px dashed var(--line-soft); }
html.sh-hack:not(.hack-story) .sh-brand { font-family:var(--hand); font-size:29px; }
html.sh-hack:not(.hack-story) :is(.sh-brand svg,.sh-logo) { color:var(--accent-2); }
html.sh-hack:not(.hack-story) :is(.sh-theme-menu,.sh-menu) { border-radius:12px 5px 15px 6px; background:var(--paper-hi); }
html.sh-hack:not(.hack-story) :is(.sh-nav a,.sh-footer a) { text-underline-offset:5px; }
html.sh-hack:not(.hack-story) :is(a,input,button,select,textarea):focus-visible { outline:2px dashed var(--accent); outline-offset:3px; }
html.sh-hack:not(.hack-story) progress { accent-color:var(--accent); height:12px; border-radius:8px; }
html.sh-hack:not(.hack-story) #events-list .card,
html.sh-hack:not(.hack-story) .hack-directory li:not(.empty) {
  border-left:5px solid var(--event-color,var(--brand)); background:var(--accent-soft);
}
html.sh-hack:not(.hack-story) :is(#events-list .card,.hack-directory li):nth-child(3n+1) { border-radius:7px 18px 9px 5px; }
html.sh-hack:not(.hack-story) :is(#events-list .card,.hack-directory li):nth-child(3n+2) { border-radius:17px 4px 14px 8px; }
html.sh-hack:not(.hack-story) .sh-event-default .hero { border:1.5px solid var(--line-soft); border-left:6px solid var(--event-color,var(--brand)); border-radius:var(--wobble); box-shadow:3px 4px 0 var(--paper-ink); background:var(--paper-hi); }
html.sh-hack:not(.hack-story) .sh-event-default .hero::after { border-width:3px; border-style:dashed; opacity:.55; }
html.sh-hack:not(.hack-story) .sh-event-default :is(section,.content-list) { border-top-style:dashed; }
html.sh-hack:not(.hack-story) .sh-event-default section > h2 { border-left-width:3px; }
html.sh-hack:not(.hack-story) :is(.event-icon,.event-list-icon,#event-icon-preview) { border:1.5px solid var(--line-soft); border-radius:50% 46% 49% 45%; }
@media(max-width:700px) {
  html.sh-hack:not(.hack-story) :is(.wrap,main) { min-width:0; }
  html.sh-hack:not(.hack-story) #mg-tabs .tab { font-size:16px; }
  html.sh-hack:not(.hack-story) :is(.sh-bar,.sh-footer-inner) { flex-wrap:wrap; }
  html.sh-hack:not(.hack-story) :is(.cap-row,.auth-input) { max-width:100%; }
}

html.sh-hack:not(.hack-story) body.sh-event-default {
  --bg:var(--paper); --surface:var(--paper-hi); --grid:var(--paper-lo); --border:var(--paper-ink);
  --text:var(--line); --text-secondary:var(--line-soft); --on-accent:var(--paper-hi); --event-page:var(--paper);
}
html.sh-hack:not(.hack-story)[data-theme="dark"] body.sh-event-default { --on-accent:var(--paper); }

html.sh-hack:not(.hack-story) .sh-logo { font:700 29px/1.2 var(--hand); letter-spacing:0; color:var(--accent-2); }
html.sh-hack:not(.hack-story) :is(.sh-signin,.sh-signout,.sh-acct-menu,.sh-theme,.download,.btn-primary) { font-family:var(--note); font-size:17px; min-height:44px; }
html.sh-hack:not(.hack-story) :is(.sh-signin,.download,.btn-primary) { border-radius:var(--wobble); }
html.sh-hack:not(.hack-story) :is(.sh-signin,.sh-theme) { border:1.5px solid var(--line-soft); }
html.sh-hack:not(.hack-story) :is(.option,.skill) { border:1.5px solid var(--line-soft); border-radius:var(--wobble); box-shadow:var(--shadow); }
html.sh-hack:not(.hack-story) #jsc-criteria :is(.btn,.chip) { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:17px; min-width:44px; min-height:44px; }
html.sh-hack:not(.hack-story) .row-menu { background:var(--paper-hi); border-color:var(--paper-ink); border-radius:var(--wobble); box-shadow:var(--shadow); }
html.sh-hack:not(.hack-story) .row-menu .mi { font-family:var(--note); font-size:17px; }

/* The film keeps its drawing tokens; its navigation uses the same chrome. */
html.hack-story :is(.sh-header,.sh-footer) { font:16px/1.6 var(--font); color:var(--line); background:var(--paper); }
html.hack-story .sh-logo { font:700 29px/1.2 var(--hand); color:var(--accent-2); }
html.hack-story :is(.sh-signin,.sh-signout,.sh-acct-menu,.sh-theme) { font-family:var(--note); font-size:17px; min-height:44px; }
html.hack-story .sh-header { border-bottom:1.5px dashed var(--line-soft); }
html.hack-story .sh-footer { border-top:1.5px dashed var(--line-soft); }
html.hack-story :is(.sh-signin,.sh-theme) { border:1.5px solid var(--line-soft); border-radius:var(--wobble); }
html.sh-hack body.sh-status { padding:0; text-align:left; }
html.sh-hack body.sh-status main { padding:12vh 20px; text-align:center; }
html.sh-hack body.sh-status main p { color:var(--line-soft); }
@media(max-width:700px) { html.hack-story :is(.sh-bar,.sh-foot) { flex-wrap:wrap; } }

/* Keep selection after the paper card/chip rules. Use the theme's strongest
   ink and paper pair, including event colours and the film's sound control.
   Limit class states to controls: .view.active and story .on are visibility. */
html.sh-hack :is(button,a):not([role="tab"],.tab,.chip,.owner-tab,.range-opt,[data-os]):is(
  [aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),
  .active,.on,.selected,.current
),
html.sh-hack :is(.progress li.on,.current-label,.key-tag),
html.sh-hack tr.on td {
  background:var(--line); color:var(--paper); border-color:var(--line);
  --text:var(--paper); --text-secondary:var(--paper); --dim:var(--paper);
  --accent:var(--paper); --accent-hover:var(--paper);
  box-shadow:inset 0 0 0 2px var(--line); font-weight:700;
}
/* Nested labels (provider details, Swagger tablinks, counts) retain contrast. */
html.sh-hack :is(button,a,[role="tab"],.tab,.chip,.owner-tab,.range-opt):is(
  [aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),
  .active,.on,.selected,.current
) :is(span,b,strong,small,button,a),
html.sh-hack tr.on td :is(span,b,strong,small,a) { color:inherit !important; }

/* Tabs, segmented controls and filter chips use the header's current-page
   mark: the selected one keeps its ink and gets the hand-drawn underline
   (the ::after rule below), not a filled block. Chips keep an ink outline. */
html.sh-hack { --nav-mark:#d15d48; }
html.sh-hack[data-theme="dark"] { --nav-mark:#ed9c8c; }
html.sh-hack :is([role="tab"],.tab,.chip,.owner-tab,.range-opt,[data-os]):is(
  [aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),
  .active,.on,.selected,.current
),
html.sh-hack #mg-tabs .tab:is([aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),.active,.on,.selected,.current),
html.sh-hack .swagger-ui .tab li.active button.tablinks {
  position:relative; background:transparent; color:var(--line) !important; box-shadow:none;
  border-bottom-color:transparent;
  --text:var(--line); --text-secondary:var(--line-soft); --accent:#a33f31;
}
html.sh-hack[data-theme="dark"] :is([role="tab"],.tab,.chip,.owner-tab,.range-opt,[data-os]):is([aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),.active,.on,.selected,.current) { --accent:#ed9c8c; }
html.sh-hack .chip.chip:is([aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),.active,.on,.selected,.current) { border-color:var(--line); }
/* In the phone section menu the selected cell shrinks to its label, so the mark does too. */
html.sh-hack #mg-tabs.menu-open .tab[aria-selected="true"] { justify-self:start; }
html.sh-hack .swagger-ui .tab li.active { background:transparent; }

/* Header: the current page keeps its ink and gets a hand-drawn red
   underline, the same mark as the tabs above.
   "Your events" is the one outlined control; Account and Sign out are quiet. */
html.sh-hack .sh-header .sh-logo { display:inline-flex; align-items:center; min-height:44px; }
html.sh-hack .sh-header .sh-bar > a.sh-signin:not(.sh-acct-link),
html.sh-hack .sh-header.sh-authed .sh-acct-link,
html.sh-hack .sh-header .sh-bar .sh-acct-btn { display:inline-flex; align-items:center; position:relative; min-height:44px; }
html.sh-hack .sh-header:not(.sh-authed) .sh-acct-link { display:none; }
html.sh-hack .sh-header .sh-theme { width:44px; height:44px; }
html.sh-hack .sh-header.sh-authed .sh-signout { display:inline-flex; align-items:center; padding:0 6px; position:relative; }
html.sh-hack .sh-header .sh-acct-link { border-color:transparent; padding-inline:6px; color:var(--line-soft); }
html.sh-hack .sh-header .sh-acct-link:hover { color:var(--line); }
@media(max-width:640px) {
  html.sh-hack .sh-header.sh-authed :is(#dash-link,.sh-signout,.sh-acct-link) { display:none; }
}
html.sh-hack .sh-header :is(.sh-signin,.sh-signout):is([aria-current]:not([aria-current="false"])) {
  background:transparent; color:var(--line); font-weight:inherit; box-shadow:none;
  --text:var(--line); --text-secondary:var(--line-soft); --accent:#a33f31;
}
html.sh-hack[data-theme="dark"] .sh-header :is(.sh-signin,.sh-signout):is([aria-current]:not([aria-current="false"])) { --accent:#ed9c8c; }
html.sh-hack .sh-header #dash-link:is([aria-current]:not([aria-current="false"])) { border-color:var(--line-soft); }
html.sh-hack .sh-header .sh-acct-link:is([aria-current]:not([aria-current="false"])) { border-color:transparent; }
html.sh-hack :is([role="tab"],.tab,.chip,.owner-tab,.range-opt,[data-os]):is(
  [aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),
  .active,.on,.selected,.current
)::after,
html.sh-hack #mg-tabs .tab:is([aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),.active,.on,.selected,.current)::after,
html.sh-hack .swagger-ui .tab li.active button.tablinks::after,
html.sh-hack .sh-header :is(.sh-signin,.sh-signout):is([aria-current]:not([aria-current="false"]))::after {
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:7px; pointer-events:none;
  background:var(--nav-mark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C14 3.4 27 4.6 40 3.8S66 2.6 79 3.6 93 4.4 98 3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C14 3.4 27 4.6 40 3.8S66 2.6 79 3.6 93 4.4 98 3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
html.sh-hack .sh-header .sh-acct-link:is([aria-current]:not([aria-current="false"]))::after { left:4px; right:4px; }
/* Where the mark sits on each control: under the label, not the padding. */
html.sh-hack .tab:is([aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),.active,.on,.selected,.current)::after,
html.sh-hack .swagger-ui .tab li.active button.tablinks::after,
html.sh-hack #mg-tabs .tab:is([aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),.active,.on,.selected,.current)::after { left:10px; right:10px; bottom:4px; }
html.sh-hack .owner-tab:is([aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),.active,.on,.selected,.current)::after { left:-2px; right:-2px; bottom:4px; }
html.sh-hack :is(.range-opt,[data-os],.chip):is([aria-pressed="true"],[aria-selected="true"],[aria-current]:not([aria-current="false"]),.active,.on,.selected,.current)::after { left:9px; right:9px; bottom:2px; height:6px; }