Something went wrong. Try again.
Tea journaling on ATProto (alpha)
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491/* ======================================== utilities.css — Utility Classes ======================================== Every Tailwind utility class in use, hand-written as plain CSS. ======================================== */
/* ── Section 1: Display & Layout ── */
/* Display */.block { display: block;}.inline-block { display: inline-block;}
.flex { display: flex;}.inline-flex { display: inline-flex;}.grid { display: grid;}.hidden { display: none;}
/* Flex direction */
.flex-col { flex-direction: column;}
/* Flex wrap */.flex-wrap { flex-wrap: wrap;}
/* Flex */.flex-1 { flex: 1 1 0%;}.grow { flex-grow: 1;}.flex-shrink-0 { flex-shrink: 0;}.shrink-0 { flex-shrink: 0;}
/* Align items */.items-start { align-items: flex-start;}.items-center { align-items: center;}.items-end { align-items: flex-end;}.items-baseline { align-items: baseline;}
/* Justify content */
.justify-center { justify-content: center;}.justify-end { justify-content: flex-end;}.justify-between { justify-content: space-between;}
/* Self */.self-start { align-self: flex-start;}
/* Grid */.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr));}.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr));}.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr));}
.col-span-2 { grid-column: span 2 / span 2;}
/* ── Section 2: Spacing (ScaleUtility) ── */
/* Margin — all sides */.m-0 { margin: 0;}.mx-auto { margin-left: auto; margin-right: auto;}.mx-1\.5 { margin-left: 0.375rem; margin-right: 0.375rem;}.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem;}
.mt-0 { margin-top: 0;}.mt-0\.5 { margin-top: 0.125rem;}.mt-1 { margin-top: 0.25rem;}.mt-2 { margin-top: 0.5rem;}.mt-3 { margin-top: 0.75rem;}.mt-4 { margin-top: 1rem;}.mt-5 { margin-top: 1.25rem;}.mt-6 { margin-top: 1.5rem;}.mt-8 { margin-top: 2rem;}.mt-12 { margin-top: 3rem;}.mt-auto { margin-top: auto;}
.mr-1 { margin-right: 0.25rem;}
.mb-0 { margin-bottom: 0;}.mb-1 { margin-bottom: 0.25rem;}.mb-1\.5 { margin-bottom: 0.375rem;}.mb-2 { margin-bottom: 0.5rem;}.mb-3 { margin-bottom: 0.75rem;}.mb-4 { margin-bottom: 1rem;}.mb-5 { margin-bottom: 1.25rem;}.mb-6 { margin-bottom: 1.5rem;}.mb-8 { margin-bottom: 2rem;}
.ml-1 { margin-left: 0.25rem;}.ml-1\.5 { margin-left: 0.375rem;}.ml-2 { margin-left: 0.5rem;}.ml-3 { margin-left: 0.75rem;}.ml-auto { margin-left: auto;}
/* Padding */.p-0 { padding: 0;}.p-2 { padding: 0.5rem;}.p-3 { padding: 0.75rem;}.p-4 { padding: 1rem;}.p-6 { padding: 1.5rem;}.p-8 { padding: 2rem;}
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem;}.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem;}.px-2 { padding-left: 0.5rem; padding-right: 0.5rem;}.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem;}.px-3 { padding-left: 0.75rem; padding-right: 0.75rem;}.px-4 { padding-left: 1rem; padding-right: 1rem;}.px-5 { padding-left: 1.25rem; padding-right: 1.25rem;}.px-6 { padding-left: 1.5rem; padding-right: 1.5rem;}.px-8 { padding-left: 2rem; padding-right: 2rem;}
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem;}.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem;}.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem;}.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem;}
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem;}.py-4 { padding-top: 1rem; padding-bottom: 1rem;}.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem;}.py-8 { padding-top: 2rem; padding-bottom: 2rem;}.py-12 { padding-top: 3rem; padding-bottom: 3rem;}
.pt-1 { padding-top: 0.25rem;}.pt-2 { padding-top: 0.5rem;}.pt-3 { padding-top: 0.75rem;}.pt-4 { padding-top: 1rem;}
.pr-2 { padding-right: 0.5rem;}.pl-2 { padding-left: 0.5rem;}.pl-3 { padding-left: 0.75rem;}.pl-11 { padding-left: 2.75rem;}
/* Gap */.gap-1 { gap: 0.25rem;}.gap-1\.5 { gap: 0.375rem;}.gap-2 { gap: 0.5rem;}.gap-3 { gap: 0.75rem;}.gap-4 { gap: 1rem;}.gap-6 { gap: 1.5rem;}.gap-x-2 { column-gap: 0.5rem;}.gap-x-4 { column-gap: 1rem;}.gap-x-6 { column-gap: 1.5rem;}.gap-y-1 { row-gap: 0.25rem;}.gap-y-2 { row-gap: 0.5rem;}
/* Space — lobotomized owl selector */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem;}.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem;}.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem;}.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem;}.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem;}
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem;}.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: -0.375rem;}
/* ── Section 3: Sizing ── */
.h-2 { height: 0.5rem;}.h-3 { height: 0.75rem;}.h-3\.5 { height: 0.875rem;}.h-4 { height: 1rem;}.h-5 { height: 1.25rem;}.h-6 { height: 1.5rem;}.h-7 { height: 1.75rem;}.h-8 { height: 2rem;}.h-10 { height: 2.5rem;}.h-12 { height: 3rem;}.h-16 { height: 4rem;}.h-full { height: 100%;}.h-\[18px\] { height: 18px;}.min-h-full { min-height: 100%;}.max-h-48 { max-height: 12rem;}
.w-2 { width: 0.5rem;}.w-3 { width: 0.75rem;}.w-3\.5 { width: 0.875rem;}.w-4 { width: 1rem;}.w-5 { width: 1.25rem;}.w-6 { width: 1.5rem;}.w-7 { width: 1.75rem;}.w-8 { width: 2rem;}.w-10 { width: 2.5rem;}.w-12 { width: 3rem;}.w-14 { width: 3.5rem;}.w-16 { width: 4rem;}.w-20 { width: 5rem;}.w-24 { width: 6rem;}.w-28 { width: 7rem;}.w-36 { width: 9rem;}.w-52 { width: 13rem;}.w-1\/2 { width: 50%;}.w-1\/3 { width: 33.333333%;}.w-2\/3 { width: 66.666667%;}.w-1\/4 { width: 25%;}.w-3\/4 { width: 75%;}.w-1\/6 { width: 16.666667%;}.w-2\/5 { width: 40%;}.w-3\/5 { width: 60%;}.w-full { width: 100%;}
.min-w-0 { min-width: 0;}.min-w-\[18px\] { min-width: 18px;}.max-w-none { max-width: none;}.max-w-\[200px\] { max-width: 200px;}.max-w-xl { max-width: 36rem;}.max-w-md { max-width: 28rem;}
/* ── Section 4: Typography ── */
/* Font family */.font-sans { font-family: "Iosevka Patrick", system-ui, sans-serif;}.font-mono { font-family: "Iosevka Patrick", ui-monospace, monospace;}
/* Font size */.text-xs { font-size: 0.75rem; line-height: 1rem;}.text-sm { font-size: 0.875rem; line-height: 1.25rem;}.text-base { font-size: 1rem; line-height: 1.5rem;}.text-lg { font-size: 1.125rem; line-height: 1.75rem;}.text-xl { font-size: 1.25rem; line-height: 1.75rem;}.text-2xl { font-size: 1.5rem; line-height: 2rem;}.text-3xl { font-size: 1.875rem; line-height: 2.25rem;}.text-4xl { font-size: 2.25rem; line-height: 2.5rem;}.text-6xl { font-size: 3.75rem; line-height: 1;}.text-\[10px\] { font-size: 10px;}.text-\[0\.9375rem\] { font-size: 0.9375rem;}
/* Font weight */.font-medium { font-weight: 500;}.font-semibold { font-weight: 600;}.font-bold { font-weight: 700;}
/* Letter spacing */.tracking-wide { letter-spacing: 0.025em;}.tracking-wider { letter-spacing: 0.05em;}
/* Line height */.leading-none { line-height: 1;}.leading-relaxed { line-height: 1.625;}
/* Text decoration */.underline { text-decoration-line: underline;}
.italic { font-style: italic;}.uppercase { text-transform: uppercase;}
.underline-offset-2 { text-underline-offset: 2px;}
/* Text alignment */.text-left { text-align: left;}.text-center { text-align: center;}
/* Whitespace */.whitespace-nowrap { white-space: nowrap;}.whitespace-pre-wrap { white-space: pre-wrap;}.break-all { word-break: break-all;}.wrap-break-word { overflow-wrap: break-word;}
/* Truncate */.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* Line clamp */.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
/* ── Section 5: Colors (ColorUtility) ── */
/* --- Brown palette --- The full text-brown-{X} family has been migrated to semantic tokens (text-primary/secondary/emphasis/muted/faint/placeholder in 12-text-utilities.css). A few rare 50/100/300 variants remain for cases where the brown shade IS the intent (e.g. inverse text on dark headers). */.text-brown-50 { color: var(--brand-brown-50);}.text-brown-100 { color: var(--brand-brown-100);}.text-brown-300 { color: var(--brand-brown-300);}
.bg-brown-50 { background-color: var(--brand-brown-50);}.bg-brown-100 { background-color: var(--brand-brown-100);}.bg-brown-200 { background-color: var(--brand-brown-200);}.bg-brown-300 { background-color: var(--brand-brown-300);}
.bg-brown-800 { background-color: var(--brand-brown-800);}
.border-brown-200 { border-color: var(--brand-brown-200);}.border-brown-300 { border-color: var(--brand-brown-300);}
.decoration-brown-400 { text-decoration-color: var(--brand-brown-400);}
.accent-brown-700 { accent-color: var(--brand-brown-700);}
/* Brown opacity variants */.bg-brown-50\/60 { background-color: color-mix(in srgb, var(--brand-brown-50) 60%, transparent);}
.border-brown-200\/60 { border-color: color-mix(in srgb, var(--brand-brown-200) 60%, transparent);}
/* --- Amber palette --- */.text-amber-500 { color: var(--brand-amber-500);}.text-amber-600 { color: var(--brand-amber-600);}.text-amber-700 { color: var(--brand-amber-700);}.text-amber-800 { color: var(--brand-amber-800);}
.bg-amber-50 { background-color: var(--brand-amber-50);}.bg-amber-100 { background-color: var(--brand-amber-100);}
.bg-amber-400 { background-color: var(--brand-amber-400);}
.border-amber-200 { border-color: var(--brand-amber-200);}
/* Amber opacity variants */
/* --- Red palette --- */.text-red-400 { color: var(--brand-red-400);}.text-red-500 { color: var(--brand-red-500);}.text-red-600 { color: var(--brand-red-600);}.text-red-700 { color: var(--brand-red-700);}.text-red-800 { color: var(--brand-red-800);}.text-red-900 { color: var(--brand-red-900);}
.bg-red-50 { background-color: var(--brand-red-50);}.bg-red-100 { background-color: var(--brand-red-100);}
.bg-red-700 { background-color: var(--brand-red-700);}
.border-red-200 { border-color: var(--brand-red-200);}.border-red-300 { border-color: var(--brand-red-300);}
/* --- Green palette --- */.text-green-500 { color: var(--brand-green-500);}.text-green-600 { color: var(--brand-green-600);}.text-green-700 { color: var(--brand-green-700);}.text-green-800 { color: var(--brand-green-800);}
.bg-green-100 { background-color: var(--brand-green-100);}
/* --- Blue palette --- */.text-blue-400 { color: var(--brand-blue-400);}.text-blue-700 { color: var(--brand-blue-700);}.text-blue-800 { color: var(--brand-blue-800);}
.bg-blue-100 { background-color: var(--brand-blue-100);}
/* --- Purple palette --- */.text-purple-700 { color: var(--brand-purple-700);}.text-purple-800 { color: var(--brand-purple-800);}
.bg-purple-100 { background-color: var(--brand-purple-100);}
/* --- Gray palette --- */.text-gray-800 { color: var(--brand-gray-800);}.bg-gray-100 { background-color: var(--brand-gray-100);}
/* --- Utility colors --- */.text-white { color: #ffffff;}.bg-white { background-color: #ffffff;}.border-white { border-color: #ffffff;}
/* --- Gradient (from output.css) --- */.bg-linear-to-br { --tw-gradient-position: to bottom right; background-image: linear-gradient(var(--tw-gradient-stops));}.from-brown-50 { --tw-gradient-from: var(--brand-brown-50); --tw-gradient-stops: var( --tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position) );}.to-brown-100 { --tw-gradient-to: var(--brand-brown-100); --tw-gradient-stops: var( --tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position) );}
/* Orange and yellow (used in oolong/suggestions) */.bg-orange-100 { background-color: #ffedd5;}.text-orange-400 { color: #fb923c;}.text-orange-800 { color: #9a3412;}.bg-yellow-100 { background-color: #fef9c3;}.text-yellow-800 { color: #854d0e;}
/* Semantic color classes */.text-secondary { color: var(--text-secondary);}.text-muted { color: var(--text-muted);}.text-faint { color: var(--text-faint);}.text-danger { color: var(--text-danger);}.text-success { color: var(--text-success);}
/* ── Section 6: Border & Radius ── */
/* Border width */.border { border-width: 1px; border-style: solid;}.border-0 { border-width: 0;}
.border-t { border-top-width: 1px; border-top-style: solid;}.border-b { border-bottom-width: 1px; border-bottom-style: solid;}.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid;}
/* Border radius */.rounded { border-radius: 0.25rem;}.rounded-sm { border-radius: 0.125rem;}.rounded-md { border-radius: 0.375rem;}.rounded-lg { border-radius: 0.5rem;}.rounded-xl { border-radius: 0.75rem;}.rounded-full { border-radius: 9999px;}
/* Ring (simplified — matches Tailwind's ring-2 pattern) */
/* ── Section 7: Effects ── */
/* Shadows — reference SemanticToken */.shadow-xs { box-shadow: var(--shadow-sm);}.shadow-md { box-shadow: var(--shadow-md);}.shadow-lg { box-shadow: var(--shadow-lg);}
/* Opacity */
.opacity-60 { opacity: 0.6;}
/* Transitions */.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}.transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}
/* ── Section 8: Positioning ── */
.relative { position: relative;}.absolute { position: absolute;}.fixed { position: fixed;}.sticky { position: sticky;}
/* Z-index */.z-10 { z-index: 10;}.z-50 { z-index: 50;}
/* Top / Right / Bottom / Left */.top-0 { top: 0;}.top-1\/2 { top: 50%;}.-top-1 { top: -0.25rem;}.-right-1 { right: -0.25rem;}
.bottom-6 { bottom: 1.5rem;}.bottom-full { bottom: 100%;}.right-2 { right: 0.5rem;}.right-6 { right: 1.5rem;}
/* Transforms */
.-translate-y-1\/2 { transform: translateY(-50%);}
/* ── Section 9: Overflow & Misc ── */
/* Container */.container { width: 100%;}@media (min-width: 640px) { .container { max-width: 640px; }}@media (min-width: 768px) { .container { max-width: 768px; }}@media (min-width: 1024px) { .container { max-width: 1024px; }}@media (min-width: 1280px) { .container { max-width: 1280px; }}@media (min-width: 1536px) { .container { max-width: 1536px; }}
/* List styles */.list-disc { list-style-type: disc;}.list-decimal { list-style-type: decimal;}.list-inside { list-style-position: inside;}
/* HTMX indicator */.htmx-indicator { display: none;}.htmx-request .htmx-indicator { display: inline;}
/* Animation pulse (defined in components.css with @keyframes) */.animate-pulse { animation: enhanced-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
/* Form checkbox (native-style appearance reset) */.form-checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1rem; height: 1rem; border: 1px solid var(--input-border); border-radius: 0.25rem; background: var(--input-bg); cursor: pointer; flex-shrink: 0;}.form-checkbox:checked { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='%23fff'/%3e%3c/svg%3e");}
/* Prose — for rich text content (atproto pages, about, terms) */.prose { max-width: 65ch; color: var(--text-primary); line-height: 1.75;}.prose p { margin-bottom: 1em;}.prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em;}.prose h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.25em; margin-bottom: 0.5em;}.prose ul,.prose ol { margin: 0.5em 0; padding-left: 1.5em;}.prose li { margin: 0.25em 0;}.prose a { color: var(--text-muted); text-decoration: underline;}.prose a:hover { color: var(--text-primary);}.prose blockquote { border-left: 3px solid var(--card-border); padding-left: 1em; margin: 1em 0; color: var(--text-secondary);}.prose code { font-family: "Iosevka Patrick", ui-monospace, monospace; font-size: 0.875em; background: var(--surface-bg); padding: 0.2em 0.4em; border-radius: 0.25rem;}.prose pre { background: var(--surface-bg); border: 1px solid var(--card-border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto;}.prose pre code { background: none; padding: 0;}.prose-lg { font-size: 1.0625rem;}.prose-lg p { margin-bottom: 1.25em;}.prose-lg h2 { font-size: 1.375rem;}
/* Cursor */.cursor-pointer { cursor: pointer;}
.overflow-x-auto { overflow-x: auto;}.overflow-y-auto { overflow-y: auto;}
.object-cover { object-fit: cover;}.cursor-pointer { cursor: pointer;}.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}
/* ── Section 10: State Variants ── */
/* Hover — colors (brown) */.hover\:bg-brown-50:hover { background-color: var(--brand-brown-50);}.hover\:bg-brown-100:hover { background-color: var(--brand-brown-100);}.hover\:bg-brown-200:hover { background-color: var(--brand-brown-200);}.hover\:bg-brown-400:hover { background-color: var(--brand-brown-400);}.hover\:bg-brown-700:hover { background-color: var(--brand-brown-700);}
/* Semantic hover variants — derive from --text-* tokens so they swap automatically in dark mode without needing an explicit override. */.hover\:text-primary:hover { color: var(--text-primary);}.hover\:text-secondary:hover { color: var(--text-secondary);}.hover\:text-emphasis:hover { color: var(--text-emphasis);}.hover\:text-muted:hover { color: var(--text-muted);}.hover\:text-faint:hover { color: var(--text-faint);}.hover\:text-placeholder:hover { color: var(--text-placeholder);}
/* Brown-palette hover variants kept for the few remaining non-semantic call sites (hover:text-brown-950, etc.). Prefer the semantic variants above. */.hover\:text-brown-950:hover { color: var(--brand-brown-950);}
.hover\:text-white:hover { color: #ffffff;}
.hover\:border-brown-400:hover { border-color: var(--brand-brown-400);}.hover\:underline:hover { text-decoration-line: underline;}.hover\:decoration-brown-700:hover { text-decoration-color: var(--brand-brown-700);}
.hover\:opacity-80:hover { opacity: 0.8;}.hover\:opacity-90:hover { opacity: 0.9;}
.hover\:shadow-md:hover { box-shadow: var(--shadow-md);}.hover\:shadow-md:hover { box-shadow: var(--shadow-md);}.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);}
/* Hover — amber */.hover\:text-amber-700:hover { color: var(--brand-amber-700);}.hover\:text-amber-800:hover { color: var(--brand-amber-800);}.hover\:bg-amber-200:hover { background-color: var(--brand-amber-200);}
/* Hover — red */.hover\:text-red-800:hover { color: var(--brand-red-800);}.hover\:bg-red-200:hover { background-color: var(--brand-red-200);}.hover\:bg-red-800:hover { background-color: var(--brand-red-800);}
/* Hover — blue, green, purple */.hover\:bg-blue-200:hover { background-color: var(--brand-blue-200);}.hover\:bg-green-200:hover { background-color: var(--brand-green-200);}.hover\:bg-purple-200:hover { background-color: var(--brand-purple-200);}
/* Focus */.focus\:border-amber-500:focus { border-color: var(--brand-amber-500);}.focus\:border-red-500:focus { border-color: var(--brand-red-500);}.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--ring-color, currentColor);}.focus\:ring-amber-500:focus { --ring-color: var(--brand-amber-500);}.focus\:ring-brown-500:focus { --ring-color: var(--brand-brown-500);}.focus\:ring-red-500:focus { --ring-color: var(--brand-red-500);}
/* Focus-visible */.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px var(--ring-color, currentColor);}
.focus-visible\:ring-amber-400\/50:focus-visible { --ring-color: color-mix(in srgb, var(--brand-amber-400) 50%, transparent);}
/* Outline hidden */
/* Disabled */.disabled\:opacity-50:disabled { opacity: 0.5;}.disabled\:cursor-wait:disabled { cursor: wait;}
/* ── Section 11: Group Variants ── */
/* Group hover / author — named group. Semantic targets derive from --text-* tokens so they swap automatically in dark mode. */.group\/author:hover .group-hover\/author\:text-primary { color: var(--text-primary);}.group\/author:hover .group-hover\/author\:text-secondary { color: var(--text-secondary);}.group\/author:hover .group-hover\/author\:underline { text-decoration-line: underline;}
/* ── Section 12: Responsive Variants ── */
/* sm: @media (min-width: 640px) */@media (min-width: 640px) { .sm\:block { display: block; } .sm\:inline { display: inline; } .sm\:flex-row { flex-direction: row; } .sm\:items-end { align-items: flex-end; } .sm\:gap-3 { gap: 0.75rem; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:rounded-lg { border-radius: 0.5rem; } .sm\:p-6 { padding: 1.5rem; } .sm\:px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
.sm\:py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; }}
/* md: @media (min-width: 768px) */@media (min-width: 768px) { .md\:flex-row { flex-direction: row; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }}
/* lg: @media (min-width: 1024px) */@media (min-width: 1024px) { .lg\:block { display: block; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }}