/* Doodle layer, after polish.css: a bright yellow bar, heavy black Archivo headlines with a yellow
   highlighter on key words, white rounded cards on warm paper, and black ink doodles. The red pen
   stays for corrections. Light only: the doodles are drawn for a white page. */
:root {
  color-scheme: light;
  --yellow: #ffd400;
  --yellow-soft: #fff2b0;
  --bg: #f6f4ef;
  --surface: #ffffff;
  --paper: #fffdf7;
  --ink: #141414;
  --muted: #5a5a5a;
  --line: #e7e2d6;
  --accent: #1593c9;
  --accent-soft: #e5f4fb;
  --hl: #ffe680;
  --shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 8px 24px -10px rgba(20, 20, 20, .16);
  --shadow-lift: 0 2px 4px rgba(20, 20, 20, .06), 0 16px 34px -14px rgba(20, 20, 20, .24);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --r: 16px;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
body { background: var(--bg); color: var(--ink); font-size: 15.5px; }
h1, h2, h3 { font-family: var(--f-display); color: var(--ink); }
h2 { font-weight: 900; letter-spacing: -.015em; }
h3 { font-weight: 800; }
::selection { background: var(--hl); }

/* The highlighter behind key words, as on a printed page marked with a yellow pen. */
.hl { background: linear-gradient(180deg, transparent 22%, var(--hl) 22%, var(--hl) 90%, transparent 90%); padding: 0 .12em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.scribble { font-family: var(--f-pen); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--ink); white-space: nowrap; }
svg[filter] { overflow: visible; }

/* ---------- header: yellow bar ---------- */
.top { background: var(--yellow); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
body::before { background: var(--yellow); }
.top .wrap { padding-block: 10px; }
.brand { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: 1.45rem; letter-spacing: -.02em; text-transform: uppercase; gap: 10px; }
.brand svg { width: 38px; height: 38px; filter: none; transform: rotate(-6deg); }
.brand-sub { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 1.7rem; }
.brand small { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.status { background: #fff; border: 2px solid var(--ink); font-weight: 600; color: var(--ink); padding: 5px 12px; }
.status .linkbtn { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.credits { color: var(--ok); border-right-color: color-mix(in srgb, var(--ink) 20%, transparent); }

/* ---------- surfaces ---------- */
.card, .brief, .sheet { border: 0; border-radius: var(--r); box-shadow: var(--shadow); background: var(--surface); }
.eyebrow { color: var(--muted); font-weight: 700; letter-spacing: .1em; }
.banner { border-radius: 12px; }

/* ---------- controls ---------- */
.btn { border-radius: 10px; font-weight: 700; border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.btn:hover:not([disabled]) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active:not([disabled]) { transform: none; box-shadow: none; }
.btn.primary { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.btn.pen { background: var(--pen); border-color: var(--ink); color: #fff; box-shadow: none; }
.btn.pen:hover:not([disabled]) { box-shadow: 3px 3px 0 var(--ink); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover:not([disabled]) { box-shadow: none; transform: none; }
.btn.danger { border-color: transparent; color: var(--pen); }
.btn.danger:hover:not([disabled]) { box-shadow: none; transform: none; background: var(--pen-soft); }
.linkbtn { color: var(--accent); }
/* Links in the Make-Time manner: small caps, underlined, with a hand-drawn arrow. */
.arrowlink { text-transform: uppercase; font-size: .8rem; font-weight: 800; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; }
.arrowlink::after { content: ""; width: 22px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 5.5c6-.8 12-1 19-.4M15 1.5l5 3.7-5.4 3.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 5.5c6-.8 12-1 19-.4M15 1.5l5 3.7-5.4 3.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
.arrowlink:hover::after { transform: translateX(3px); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.check:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--yellow-soft) 55%, #fff); }
.check input { accent-color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow-soft); }
.chip.neutral { background: var(--yellow-soft); color: var(--ink); }

/* ---------- teacher hub ---------- */
.aitem { border: 2px solid transparent; box-shadow: var(--shadow); }
.aitem:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.aitem[aria-current="true"] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.aitem[aria-current="true"]::before { display: none; }
.newbox { border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; }
.subtabs button[aria-pressed="true"] { border-bottom-color: var(--ink); border-bottom-width: 3px; }
.share { background: var(--yellow-soft); border: 0; }
.share h3 { font-weight: 900; }
.badge { background: var(--pen); }

/* Guest trial: the "where should I start?" card. */
.trialcard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px 28px; align-items: center; margin-bottom: 22px; padding: 26px 30px; }
.trialcard h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.08; margin: 6px 0 14px; }
.trial-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; counter-reset: st; }
.trial-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; font-size: .98rem; }
.trial-steps .ico { width: 44px; height: 44px; display: grid; place-items: center; }
.trial-steps .ico svg { width: 40px; height: 40px; }
.trialcard .row { gap: 18px; }
.trial-art { position: relative; height: 210px; }
.trial-art .art-teacher svg { position: absolute; left: 6px; top: 8px; width: 112px; }
.trial-art .art-paper svg { position: absolute; right: 8px; bottom: 6px; width: 96px; transform: rotate(7deg); }
.trial-art .art-arrow svg { position: absolute; left: 104px; top: 86px; width: 92px; transform: rotate(16deg); }
.trial-art .s1 { position: absolute; left: 4px; top: 146px; transform: rotate(-4deg); }
.trial-art .s2 { position: absolute; right: 0; top: 18px; color: var(--pen); transform: rotate(5deg); }
@media (max-width: 760px) {
  .trialcard { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .trial-art { display: none; }
}

/* ---------- sign-in ---------- */
.login { position: relative; margin-top: 8vh; overflow: visible; }
.login h2 { font-size: 2rem; font-weight: 900; line-height: 1.1; padding-right: 64px; }
.login-art { position: absolute; right: -34px; top: -46px; width: 104px; transform: rotate(8deg); }
.login-art svg { width: 100%; height: auto; }
.login-art .scribble { position: absolute; left: -58px; top: 16px; transform: rotate(-12deg); }
@media (max-width: 560px) {
  .login { margin-top: 56px; }
  .login-art { right: 4px; top: -58px; width: 84px; }
  .login-art .scribble { left: -54px; top: 22px; }
  .login h2 { padding-right: 0; }
}

/* ---------- empty states ---------- */
.empty-art svg { width: 78px; height: auto; transform: rotate(-5deg); margin-bottom: 4px; }

/* ---------- student ---------- */
.brief { padding-right: 150px; }
.brief h2 { font-weight: 900; }
.brief::before { background: color-mix(in srgb, var(--pen) 55%, transparent); }
.brief-art { position: absolute; right: 22px; top: 18px; width: 92px; transform: rotate(6deg); }
.brief-art svg { width: 100%; height: auto; }
.brief-art .scribble { display: block; text-align: center; margin-top: 2px; transform: rotate(-6deg); }
.step { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); width: 30px; height: 30px; font-weight: 900; }
.drop { border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.drop:hover, .drop.over { border-color: var(--ink); background: color-mix(in srgb, var(--yellow-soft) 45%, #fff); }
.drop-ico { width: 72px; height: auto; color: var(--ink); }
.drop-ico svg { width: 100%; height: auto; transform: rotate(-5deg); }
.progress { background: color-mix(in srgb, var(--yellow-soft) 60%, #fff); border-color: color-mix(in srgb, var(--ink) 15%, transparent); }
details summary { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hl); text-decoration-thickness: 6px; text-underline-offset: -2px; text-decoration-skip-ink: none; }
@media (max-width: 560px) {
  .brief { padding-right: 20px; padding-top: 96px; }
  .brief-art { width: 70px; right: 16px; top: 12px; }
}

/* ---------- result ---------- */
.bar i { background: var(--ink); }
.teacher-only { border: 2px dashed var(--ink); background: var(--yellow-soft); }

/* ---------- footer ---------- */
.foot { border-top: 4px solid var(--yellow); background: #1e2427; color: #c9cdd0; }
.foot a { color: #fff; }

/* ---------- buying ---------- */
.pack { border: 2px solid var(--line); }
.pack:hover:not([disabled]) { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pack.best { border-color: var(--ink); background: var(--yellow-soft); }
.pack .tag { background: var(--ink); }

@media (prefers-reduced-motion: reduce) { .btn, .arrowlink::after { transition: none; } }

/* A fieldset is as wide as its content by default; without this the rubric table widens the page on phones. */
fieldset, .sheet-body > * { min-width: 0; }
.rubric-wrap { position: relative; } /* keeps the absolutely placed .sr labels inside the scroll box */

/* Phones: polish.css hid the status, which also hid "Intră"/"Ieși" and the credits. Keep it, smaller. */
@media (max-width: 860px) {
  .status:not(:empty) { display: flex; font-size: .74rem; padding: 4px 10px; gap: 4px; }
  body.is-student .status { display: none; }
}
@media (max-width: 560px) {
  .top .wrap { gap: 8px 12px; }
  .brand { font-size: 1.2rem; }
  .brand svg { width: 32px; height: 32px; }
  .brand-sub { font-size: 1.45rem; }
}

/* ---------- student page, simple version: title, one upload frame, name, send ---------- */
.student.simple { max-width: 720px; gap: 20px; }
.handcaps { font-family: "Patrick Hand SC", "Caveat", cursive; font-size: 1.25rem; letter-spacing: .04em; color: #3c4043; line-height: 1.25; overflow-wrap: anywhere; text-align: center; }
.s-head { text-align: center; display: grid; gap: 6px; justify-items: center; padding-top: 8px; }
.s-meta { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.s-title { font: 900 clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem)/1.08 var(--f-display); letter-spacing: -.02em; max-width: 22ch; }
.s-prof { color: var(--muted); }
.s-req { width: 100%; max-width: 620px; text-align: left; }
.s-req summary { margin: 4px auto 0; display: flex; justify-content: center; width: max-content; }
.s-req .cerinta { margin: 12px 0 10px; background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); font-family: var(--f-paper); line-height: 1.65; white-space: pre-wrap; }
.s-req .crit-mini { background: #fff; border-radius: 14px; padding: 12px 18px; box-shadow: var(--shadow); }

.upload { position: relative; display: grid; justify-items: center; gap: 10px; }
/* The frame: wobbly hand-drawn corners, dashed like pencil. */
.frame { width: 100%; min-height: 300px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 30px 20px; background: #fff; cursor: pointer; text-align: center;
  border: 3px dashed #2a2a2a; border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; transition: background .15s, transform .15s; }
.frame:hover, .frame.over { background: color-mix(in srgb, var(--yellow-soft) 45%, #fff); }
.frame.over { transform: scale(1.01); border-style: solid; }
.frame:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--yellow-soft); }
.frame b { font: 900 1.35rem var(--f-display); }
.frame .hint { max-width: 40ch; }
.frame-doc svg { width: 116px; height: auto; transition: transform .2s; }
.frame:hover .frame-doc svg { transform: rotate(-4deg) translateY(-3px); }
.frame.has-file { cursor: default; border-style: solid; border-color: var(--ok); }
.frame.has-file details { width: 100%; text-align: left; }
.paste-frame { cursor: default; padding: 16px; align-content: stretch; }
.paste-frame .paste { border: 0; box-shadow: none; min-height: 260px; background: transparent; }
.paste-frame .paste:focus { box-shadow: none; }
.upload .alt { font-size: .9rem; }
.s-arrow { position: absolute; right: -96px; top: -66px; width: 150px; transform: rotate(4deg); pointer-events: none; }
.s-arrow svg { width: 100%; height: auto; }
.s-arrow .scribble { position: absolute; right: -6px; top: -4px; transform: rotate(8deg); font-size: 1.6rem; }
@media (max-width: 980px) { .s-arrow { right: -10px; top: -78px; width: 104px; } .s-arrow .scribble { right: 60px; top: 0; } }
@media (max-width: 560px) { .s-arrow { display: none; } .frame { min-height: 240px; } }

.s-send { display: grid; gap: 10px; justify-items: center; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 20px; }
.s-send input { max-width: 380px; text-align: center; font-size: 1.05rem; }
.s-send .btn.pen { font-size: 1.05rem; padding: 13px 26px; }

/* Grading: the red pen moves along the lines and ticks appear, while the steps change. */
.grading { display: grid; justify-items: center; gap: 12px; padding: 26px 20px 30px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); text-align: center; }
.gscene { width: min(300px, 80%); height: auto; overflow: visible; }
.grading-step { font-family: "Patrick Hand SC", cursive; font-size: 1.55rem; letter-spacing: .05em; color: #2a2a2a; min-height: 1.6em; }
.grading-bar { width: min(320px, 80%); height: 12px; border: 2.5px solid #2a2a2a; border-radius: 30px 8px 30px 8px / 8px 30px 8px 30px; overflow: hidden; }
.grading-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--pen) 0 6px, #e8574f 6px 10px); animation: fill 50s cubic-bezier(.3, .35, .4, 1) forwards; }
@keyframes fill { to { width: 94%; } }
.gpen { animation: write 4.8s ease-in-out infinite; }
@keyframes write {
  0% { transform: translate(84px, 56px); } 18% { transform: translate(140px, 58px); }
  30% { transform: translate(152px, 66px); } 48% { transform: translate(90px, 92px); }
  64% { transform: translate(140px, 100px); } 82% { transform: translate(100px, 130px); } 100% { transform: translate(84px, 56px); }
}
.tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick 4.8s ease-out infinite; }
.t1 { animation-delay: .9s; } .t2 { animation-delay: 2.8s; } .t3 { animation-delay: 3.9s; }
@keyframes tick { 0% { stroke-dashoffset: 40; } 12%, 70% { stroke-dashoffset: 0; } 85%, 100% { stroke-dashoffset: 40; } }
.steam { animation: steam 2.4s ease-in-out infinite; }
@keyframes steam { 50% { transform: translateY(-3px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .gpen, .tick, .steam { animation: none; } .tick { stroke-dashoffset: 0; } .gpen { transform: translate(140px, 58px); }
  .grading-bar i { animation: none; width: 60%; } .frame, .frame-doc svg { transition: none; }
}

/* Student page: all white, as asked; the cards keep their soft shadow. */
body.is-student { --bg: #fff; background: #fff; }
body.is-student .s-send, body.is-student .grading { box-shadow: 0 0 0 1px var(--line), var(--shadow); }

/* The fan of file kinds inside the empty upload frame. */
.fan { position: relative; width: 320px; height: 150px; margin-bottom: 22px; }
.fan-card { position: absolute; left: 50%; bottom: 0; width: 96px; margin-left: -48px; transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.fan-card svg { width: 100%; height: auto; display: block; }
.fan-img { transform: translateX(-72px) translateY(12px) rotate(-15deg); z-index: 1; }
.fan-pdf { transform: translateX(-24px) rotate(-5deg); z-index: 2; }
.fan-doc { transform: translateX(24px) rotate(5deg); z-index: 3; }
.fan-ppt { transform: translateX(72px) translateY(12px) rotate(15deg); z-index: 4; }
.frame:hover .fan-img { transform: translateX(-86px) translateY(10px) rotate(-19deg); }
.frame:hover .fan-pdf { transform: translateX(-29px) translateY(-6px) rotate(-6deg); }
.frame:hover .fan-doc { transform: translateX(29px) translateY(-6px) rotate(6deg); }
.frame:hover .fan-ppt { transform: translateX(86px) translateY(10px) rotate(19deg); }
@media (max-width: 560px) { .fan { width: 260px; height: 124px; transform: scale(.82); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) { .fan-card { transition: none; } }

/* ---------- logo: the owl badge and the "korektor" marker wordmark ---------- */
.brand { gap: 10px; text-transform: none; font-style: normal; }
.brand svg.brand-badge { width: 50px; height: 50px; transform: rotate(-6deg); flex: none; overflow: visible; }
.brand-word { font: 1.75rem/1 "Permanent Marker", "Marker Felt", cursive; letter-spacing: .01em; color: var(--ink); }
@media (max-width: 560px) {
  .brand svg.brand-badge { width: 42px; height: 42px; }
  .brand-word { font-size: 1.45rem; }
}

/* The whole site is white now (teacher hub too, as asked); cards get a thin edge so they still read as cards. */
:root { --bg: #fff; }
body { background: #fff; }
.card, .sheet, .aitem, .s-send, .grading { box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.aitem[aria-current="true"] { box-shadow: 3px 3px 0 var(--ink); }
.newbox { background: #fff; }

/* Right-to-left languages (Arabic, Hebrew): arrows point the other way. */
[dir="rtl"] .arrowlink::after { transform: scaleX(-1); }
[dir="rtl"] .arrowlink:hover::after { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .trial-art { transform: scaleX(-1); }
[dir="rtl"] .trial-art .scribble { transform: scaleX(-1); }