Something went wrong. Try again.
Tea journaling on ATProto (alpha)
Something went wrong. Try again.
CSS
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113@font-face { font-family: 'Iosevka Patrick'; src: url('/static/fonts/IosevkaPatrickNerdFont-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
@font-face { font-family: 'Iosevka Patrick'; src: url('/static/fonts/IosevkaPatrickNerdFont-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap;}
@font-face { font-family: 'Iosevka Patrick'; src: url('/static/fonts/IosevkaPatrickNerdFont-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap;}
/* ======================================== Texture Patterns (inline SVG noise) ======================================== */
/* Corkboard — organic, fine-grained, warm */:root { --texture-cork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.3 0 0 0 0.15 0.2 0 0 0 0.08 0.1 0 0 0 0.02 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)'/%3E%3C/svg%3E"); /* Feed board — warm cork brown */ --feed-board-bg: #C4A882; --feed-board-border: #B09470; /* Sticky note base — warm off-white */ --feed-card-bg: #FFFDF5; /* Dot-grid + kraft — defined once per theme, theme blocks just swap the active alias */ --texture-dotgrid-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='0.7' fill='%23d2bab0' fill-opacity='0.35'/%3E%3C/svg%3E"); --texture-dotgrid-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='0.7' fill='%235A4A40' fill-opacity='0.4'/%3E%3C/svg%3E"); --texture-kraft-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.15 0 0 0 0.1 0.1 0 0 0 0.06 0.05 0 0 0 0.02 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23k)'/%3E%3C/svg%3E"); --texture-kraft-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.08 0 0 0 0.04 0.06 0 0 0 0.03 0.03 0 0 0 0.01 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23k)'/%3E%3C/svg%3E"); --texture-dotgrid: var(--texture-dotgrid-light); --texture-kraft: var(--texture-kraft-light); /* Journal paper — warm cream */ --journal-bg: #FFFDF5; /* Kraft — slightly warmer/darker than card bg */ --kraft-bg: #F7F0E8;}
/* ======================================== Design Tokens (CSS Custom Properties) Light theme (default) ======================================== */:root { /* Page */ --page-bg: #FAF7F5; --page-text: #3d2319;
/* Cards */ --card-bg: #FFFFFF; --card-border: #eaddd7; --card-shadow: rgba(61, 35, 25, 0.06); --card-shadow-hover: rgba(61, 35, 25, 0.10);
/* Surfaces (inset areas inside cards) */ --surface-bg: rgba(250, 247, 245, 0.5); --surface-border: #f2e8e5;
/* Header */ --header-bg-from: #4a2c2a; --header-bg-to: #3d2319; --header-border: #7f5539; --header-text: #FAF7F5;
/* Text hierarchy */ --text-primary: #3d2319; --text-secondary: #4a2c2a; --text-muted: #7f5539; --text-faint: #bfa094; --text-placeholder: #d2bab0;
/* Interactive */ --btn-primary-bg: #4a2c2a; --btn-primary-bg-hover: #3d2319; --btn-primary-text: #FAF7F5; --btn-secondary-bg: #FFFFFF; --btn-secondary-border: #e0cec7; --btn-secondary-text: #6b4423; --btn-secondary-bg-hover: #FAF7F5;
/* Forms */ --input-bg: #FFFFFF; --input-border: #e0cec7; --input-border-focus: #7f5539; --input-ring-focus: rgba(127, 85, 57, 0.15); --input-bg-focus: rgba(250, 247, 245, 0.3);
/* Tables */ --table-bg: #FFFFFF; --table-header-bg: #FAF7F5; --table-border: #eaddd7; --table-row-hover: #FAF7F5; --table-divider: #f2e8e5;
/* Modals */ --modal-bg: #FFFFFF; --modal-border: #eaddd7; --modal-backdrop: rgba(0, 0, 0, 0.4);
/* Feed type indicators (filter pills + type badges) */ --type-brew: #6b4423; --type-bean: #b45309; --type-recipe: #a0522d; --type-roaster: #92400e; --type-grinder: #78716c; --type-brewer: #5b6e4e;
/* Type background tints */ --type-brew-tint: rgba(107, 68, 35, 0.14); --type-bean-tint: rgba(180, 83, 9, 0.12); --type-recipe-tint: rgba(160, 82, 45, 0.12); --type-roaster-tint: rgba(146, 64, 14, 0.12); --type-grinder-tint: rgba(120, 113, 108, 0.10); --type-brewer-tint: rgba(91, 110, 78, 0.12);
/* Rating badges */ --rating-bg: #fef3c7; --rating-text: #78350f;
/* Status text — danger / success */ --text-danger: #b91c1c; --text-success: #15803d;
/* Alerts/warnings */ --alert-warning-bg: #fffbeb; --alert-warning-border: #fbbf24; --alert-warning-text: #78350f; --alert-warning-text-muted: #92400e;
/* Shadows */ --shadow-sm: 0 1px 3px var(--card-shadow); --shadow-md: 0 4px 12px var(--card-shadow-hover); --shadow-lg: 0 10px 25px var(--card-shadow-hover);
/* Footer */ --footer-bg: #FAF7F5; --footer-border: #eaddd7;}
/* ======================================== Dark theme Activates via: OS preference OR data-theme="dark" on <html> data-theme="light" forces light even on dark OS ======================================== */@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Page */ --page-bg: #0F0A08; --page-text: #FAF7F5;
/* Cards */ --card-bg: #1C1210; --card-border: #2E211B; --card-shadow: rgba(0, 0, 0, 0.3); --card-shadow-hover: rgba(0, 0, 0, 0.4);
/* Surfaces (inset areas inside cards) */ --surface-bg: rgba(36, 26, 22, 0.6); --surface-border: #2E211B;
/* Journal/label page backgrounds */ --texture-dotgrid: var(--texture-dotgrid-dark); --texture-kraft: var(--texture-kraft-dark); --journal-bg: #1A1210; --kraft-bg: #201814;
/* Feed board — noticeably lighter than cards for contrast */ --feed-board-bg: #3D2D22; --feed-board-border: #4A3828; /* Sticky notes — dark, sitting on the lighter board */ --feed-card-bg: #1A1210;
/* Header */ --header-bg-from: #0F0A08; --header-bg-to: #0F0A08; --header-border: #2E211B; --header-text: #FAF7F5;
/* Text hierarchy */ --text-primary: #FAF7F5; --text-secondary: #E0CEC4; --text-muted: #C4A898; --text-faint: #8B7265; --text-placeholder: #5A4A40;
/* Interactive */ --btn-primary-bg: #7f5539; --btn-primary-bg-hover: #6b4423; --btn-primary-text: #FAF7F5; --btn-secondary-bg: #241A16; --btn-secondary-border: #3D2D24; --btn-secondary-text: #E0CEC4; --btn-secondary-bg-hover: #2E211B;
/* Forms */ --input-bg: #241A16; --input-border: #3D2D24; --input-border-focus: #fbbf24; --input-ring-focus: rgba(251, 191, 36, 0.15); --input-bg-focus: rgba(36, 26, 22, 0.8);
/* Tables */ --table-bg: #1C1210; --table-header-bg: #241A16; --table-border: #2E211B; --table-row-hover: #241A16; --table-divider: #241A16;
/* Modals */ --modal-bg: #1C1210; --modal-border: #2E211B; --modal-backdrop: rgba(0, 0, 0, 0.6);
/* Feed type indicators - brighter on dark */ --type-brew: #a67c52; --type-bean: #d97706; --type-recipe: #c4724a; --type-roaster: #c2610e; --type-grinder: #a8a29e; --type-brewer: #8ba37a;
/* Type background tints */ --type-brew-tint: rgba(166, 124, 82, 0.18); --type-bean-tint: rgba(217, 119, 6, 0.15); --type-recipe-tint: rgba(196, 114, 74, 0.15); --type-roaster-tint: rgba(194, 97, 14, 0.15); --type-grinder-tint: rgba(168, 162, 158, 0.12); --type-brewer-tint: rgba(139, 163, 122, 0.15);
/* Rating badges */ --rating-bg: rgba(251, 191, 36, 0.15); --rating-text: #fbbf24;
/* Status text — danger / success */ --text-danger: #fca5a5; --text-success: #86efac;
/* Alerts/warnings */ --alert-warning-bg: rgba(251, 191, 36, 0.08); --alert-warning-border: rgba(251, 191, 36, 0.3); --alert-warning-text: #fde68a; --alert-warning-text-muted: #fcd34d;
/* Shadows - darker, less visible on dark bg */ --shadow-sm: 0 1px 3px var(--card-shadow); --shadow-md: 0 4px 12px var(--card-shadow-hover); --shadow-lg: 0 10px 25px var(--card-shadow-hover);
/* Footer */ --footer-bg: #0F0A08; --footer-border: #2E211B; }
/* Override common hardcoded Tailwind classes for dark mode */ .text-brown-900 { color: var(--text-primary) !important; } .text-brown-800 { color: var(--text-primary) !important; } .text-brown-700 { color: var(--text-secondary) !important; } .text-brown-600 { color: var(--text-muted) !important; } .text-brown-500 { color: var(--text-faint) !important; } .text-brown-400 { color: var(--text-placeholder) !important; }
.bg-brown-50 { background-color: var(--page-bg) !important; } .bg-brown-100 { background-color: var(--surface-bg) !important; } .bg-brown-200 { background-color: var(--card-border) !important; } .bg-brown-300 { background-color: var(--surface-bg) !important; }
.border-brown-200 { border-color: var(--card-border) !important; } .border-brown-300 { border-color: var(--card-border) !important; }
.bg-white { background-color: var(--card-bg) !important; } .bg-white\/60 { background-color: var(--surface-bg) !important; }
/* Amber badges stay visible on dark */ .bg-amber-50 { background-color: rgba(251, 191, 36, 0.1); } .bg-amber-100 { background-color: rgba(251, 191, 36, 0.15); } .bg-amber-400 { background-color: #fbbf24; } .text-amber-900 { color: #fde68a; } .text-amber-700 { color: #fcd34d; } .text-amber-600 { color: #fbbf24; } .border-amber-400 { border-color: rgba(251, 191, 36, 0.4); }
/* Warning/alert backgrounds */ .bg-green-50 { background-color: rgba(251, 191, 36, 0.08) !important; }
/* Hover states */ .hover\:bg-brown-200:hover { background-color: var(--surface-bg) !important; } .hover\:bg-brown-100:hover { background-color: var(--surface-bg) !important; } .hover\:bg-brown-50:hover { background-color: var(--surface-bg) !important; } .hover\:text-brown-900:hover { color: var(--text-primary) !important; } .hover\:text-brown-800:hover { color: var(--text-primary) !important; } .hover\:text-brown-700:hover { color: var(--text-secondary) !important; }
/* Dividers */ .divide-brown-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--card-border) !important; } .divide-brown-300 > :not([hidden]) ~ :not([hidden]) { border-color: var(--card-border) !important; }
/* Ring colors for avatars */ .ring-brown-500 { --tw-ring-color: #3D2D24 !important; } .hover\:ring-brown-400:hover { --tw-ring-color: #5A4A40 !important; }
/* Opacity-variant backgrounds (used in recipe stats grid, etc.) */ .bg-brown-50\/60 { background-color: var(--surface-bg) !important; } .bg-brown-200\/60 { background-color: var(--card-border) !important; } .border-brown-200\/60 { border-color: var(--card-border) !important; }
/* Group hover text (used in recipe author links) */ .group-hover\/author\:text-brown-900:hover, .group\/author:hover .group-hover\/author\:text-brown-900 { color: var(--text-primary) !important; } .group-hover\/author\:text-brown-800:hover, .group\/author:hover .group-hover\/author\:text-brown-800 { color: var(--text-primary) !important; }
/* Forker avatar borders */ .border-white { border-color: var(--card-bg) !important; }
/* Decoration colors */ .decoration-brown-300 { text-decoration-color: var(--card-border) !important; } .hover\:decoration-brown-500:hover { text-decoration-color: var(--text-faint) !important; }}
/* Manual dark theme override (data-theme="dark" on <html>) */:root[data-theme="dark"] { --page-bg: #0F0A08; --page-text: #FAF7F5; --card-bg: #1C1210; --card-border: #2E211B; --card-shadow: rgba(0, 0, 0, 0.3); --card-shadow-hover: rgba(0, 0, 0, 0.4); --surface-bg: rgba(36, 26, 22, 0.6); --surface-border: #2E211B; --feed-board-bg: #3D2D22; --feed-board-border: #4A3828; --feed-card-bg: #1A1210; --texture-dotgrid: var(--texture-dotgrid-dark); --texture-kraft: var(--texture-kraft-dark); --journal-bg: #1A1210; --kraft-bg: #201814; --header-bg-from: #0F0A08; --header-bg-to: #0F0A08; --header-border: #2E211B; --header-text: #FAF7F5; --text-primary: #FAF7F5; --text-secondary: #E0CEC4; --text-muted: #C4A898; --text-faint: #8B7265; --text-placeholder: #5A4A40; --btn-primary-bg: #7f5539; --btn-primary-bg-hover: #6b4423; --btn-primary-text: #FAF7F5; --btn-secondary-bg: #241A16; --btn-secondary-border: #3D2D24; --btn-secondary-text: #E0CEC4; --btn-secondary-bg-hover: #2E211B; --input-bg: #241A16; --input-border: #3D2D24; --input-border-focus: #fbbf24; --input-ring-focus: rgba(251, 191, 36, 0.15); --input-bg-focus: rgba(36, 26, 22, 0.8); --table-bg: #1C1210; --table-header-bg: #241A16; --table-border: #2E211B; --table-row-hover: #241A16; --table-divider: #241A16; --modal-bg: #1C1210; --modal-border: #2E211B; --modal-backdrop: rgba(0, 0, 0, 0.6); --type-brew: #a67c52; --type-bean: #d97706; --type-recipe: #c4724a; --type-roaster: #c2610e; --type-grinder: #a8a29e; --type-brewer: #8ba37a; --type-brew-tint: rgba(166, 124, 82, 0.18); --type-bean-tint: rgba(217, 119, 6, 0.15); --type-recipe-tint: rgba(196, 114, 74, 0.15); --type-roaster-tint: rgba(194, 97, 14, 0.15); --type-grinder-tint: rgba(168, 162, 158, 0.12); --type-brewer-tint: rgba(139, 163, 122, 0.15); --rating-bg: rgba(251, 191, 36, 0.15); --rating-text: #fbbf24; --text-danger: #fca5a5; --text-success: #86efac; --alert-warning-bg: rgba(251, 191, 36, 0.08); --alert-warning-border: rgba(251, 191, 36, 0.3); --alert-warning-text: #fde68a; --alert-warning-text-muted: #fcd34d; --shadow-sm: 0 1px 3px var(--card-shadow); --shadow-md: 0 4px 12px var(--card-shadow-hover); --shadow-lg: 0 10px 25px var(--card-shadow-hover); --footer-bg: #0F0A08; --footer-border: #2E211B;}
/* Tailwind class overrides for dark theme (both auto and manual) */:root[data-theme="dark"] .text-brown-900,:root[data-theme="dark"] .text-brown-800 { color: var(--text-primary) !important; }:root[data-theme="dark"] .text-brown-700 { color: var(--text-secondary) !important; }:root[data-theme="dark"] .text-brown-600 { color: var(--text-muted) !important; }:root[data-theme="dark"] .text-brown-500 { color: var(--text-faint) !important; }:root[data-theme="dark"] .text-brown-400 { color: var(--text-placeholder) !important; }:root[data-theme="dark"] .bg-brown-50 { background-color: var(--page-bg) !important; }:root[data-theme="dark"] .bg-brown-100 { background-color: var(--surface-bg) !important; }:root[data-theme="dark"] .bg-brown-200 { background-color: var(--card-border) !important; }:root[data-theme="dark"] .bg-brown-300 { background-color: var(--surface-bg) !important; }:root[data-theme="dark"] .border-brown-200,:root[data-theme="dark"] .border-brown-300 { border-color: var(--card-border) !important; }:root[data-theme="dark"] .bg-white { background-color: var(--card-bg) !important; }:root[data-theme="dark"] .bg-white\/60 { background-color: var(--surface-bg) !important; }:root[data-theme="dark"] .bg-amber-50 { background-color: rgba(251, 191, 36, 0.1); }:root[data-theme="dark"] .bg-amber-100 { background-color: rgba(251, 191, 36, 0.15); }:root[data-theme="dark"] .text-amber-900 { color: #fde68a; }:root[data-theme="dark"] .text-amber-700 { color: #fcd34d; }:root[data-theme="dark"] .text-amber-600 { color: #fbbf24; }:root[data-theme="dark"] .border-amber-400 { border-color: rgba(251, 191, 36, 0.4); }:root[data-theme="dark"] .bg-green-50 { background-color: rgba(251, 191, 36, 0.08) !important; }:root[data-theme="dark"] .hover\:bg-brown-200:hover,:root[data-theme="dark"] .hover\:bg-brown-100:hover,:root[data-theme="dark"] .hover\:bg-brown-50:hover { background-color: var(--surface-bg) !important; }:root[data-theme="dark"] .hover\:text-brown-900:hover,:root[data-theme="dark"] .hover\:text-brown-800:hover { color: var(--text-primary) !important; }:root[data-theme="dark"] .hover\:text-brown-700:hover { color: var(--text-secondary) !important; }:root[data-theme="dark"] .divide-brown-200 > :not([hidden]) ~ :not([hidden]),:root[data-theme="dark"] .divide-brown-300 > :not([hidden]) ~ :not([hidden]) { border-color: var(--card-border) !important; }:root[data-theme="dark"] .ring-brown-500 { --tw-ring-color: #3D2D24 !important; }:root[data-theme="dark"] .hover\:ring-brown-400:hover { --tw-ring-color: #5A4A40 !important; }:root[data-theme="dark"] .bg-brown-50\/60 { background-color: var(--surface-bg) !important; }:root[data-theme="dark"] .bg-brown-200\/60 { background-color: var(--card-border) !important; }:root[data-theme="dark"] .border-brown-200\/60 { border-color: var(--card-border) !important; }:root[data-theme="dark"] .border-white { border-color: var(--card-bg) !important; }:root[data-theme="dark"] .decoration-brown-300 { text-decoration-color: var(--card-border) !important; }:root[data-theme="dark"] .hover\:decoration-brown-500:hover { text-decoration-color: var(--text-faint) !important; }
@tailwind base;@tailwind components;@tailwind utilities;
@layer base { h1, h2, h3 { @apply font-semibold; }
/* Touch targets for interactive elements only */ button, input[type="submit"], input[type="button"] { min-height: 44px; min-width: 44px; }
/* Filter pills opt out of the 44px touch target */ [class*="filter-pill"] { min-height: auto; min-width: auto; }
/* Global keyboard focus ring — visible only for keyboard users (not click) */ :focus-visible { outline: 2px solid var(--input-border-focus); outline-offset: 2px; border-radius: 2px; } /* Clear native outline when focus-visible is in play (we draw our own above) */ :focus:not(:focus-visible) { outline: none; }
/* Prevent iOS zoom on input focus */ @media (max-width: 768px) { input, select, textarea { font-size: 16px; } }}
@layer components { /* Page Containers */ .page-container { @apply mx-auto px-2 sm:px-4; }
.page-container-sm { @apply page-container max-w-2xl; }
.page-container-md { @apply page-container max-w-3xl; }
.page-container-lg { @apply page-container max-w-4xl; }
.page-container-xl { @apply page-container max-w-6xl; }
/* Cards and Containers */ .card { background: var(--card-bg); border: 1px solid var(--card-border); @apply rounded-xl; box-shadow: var(--shadow-sm); transition: box-shadow 200ms ease; }
.card:hover { box-shadow: var(--shadow-md); }
.card-inner { @apply p-6; }
.card-sm { background: var(--card-bg); border: 1px solid var(--card-border); @apply rounded-lg; box-shadow: var(--shadow-sm); }
/* Section box for lighter content areas */ .section-box { background: var(--surface-bg); @apply rounded-lg p-4; }
/* Record view — tinted header region */ .record-view-header { @apply -mx-6 -mt-6 px-6 pt-5 pb-4 mb-6 rounded-t-xl; border-bottom: 1px solid var(--surface-border); }
.record-view-header-brew { background: linear-gradient(to bottom, var(--type-brew-tint), transparent); } .record-view-header-bean { background: linear-gradient(to bottom, var(--type-bean-tint), transparent); } .record-view-header-recipe { background: linear-gradient(to bottom, var(--type-recipe-tint), transparent); } .record-view-header-roaster { background: linear-gradient(to bottom, var(--type-roaster-tint), transparent); } .record-view-header-grinder { background: linear-gradient(to bottom, var(--type-grinder-tint), transparent); } .record-view-header-brewer { background: linear-gradient(to bottom, var(--type-brewer-tint), transparent); }
/* Record view — author line */ .record-view-author { @apply flex items-center gap-3 mb-4; }
.record-view-author-info { @apply flex-1 min-w-0; }
.record-view-author-names { @apply flex items-center gap-2 flex-wrap; }
.record-view-author-displayname { @apply font-semibold truncate; color: var(--text-primary); }
.record-view-author-handle { @apply text-sm truncate; color: var(--text-muted); }
.record-view-author-handle:hover { color: var(--text-secondary); }
.record-view-meta { @apply flex items-center gap-3 text-sm; color: var(--text-muted); }
/* Record view — title area */ .record-view-title { @apply text-2xl font-bold tracking-tight; color: var(--text-primary); }
.record-view-timestamp { @apply text-sm mt-1; color: var(--text-muted); }
/* ── Shared record view tokens ── */ .detail-label { @apply text-xs font-medium uppercase tracking-wider; color: var(--text-muted); }
.detail-value { @apply font-semibold; color: var(--text-primary); }
.detail-value-lg { @apply font-bold text-lg; color: var(--text-primary); }
.detail-value a { color: var(--text-primary); } .detail-value a:hover { text-decoration: underline; }
.detail-stacked { @apply flex flex-col gap-1; }
.detail-inline { @apply flex items-baseline gap-2; }
.record-view-footer { @apply flex flex-wrap justify-between items-center gap-3 pt-4 mt-6; }
.record-stat-line { @apply flex items-center gap-3 text-xs pt-3; color: var(--text-muted); }
.brew-rating-hero { @apply inline-flex items-baseline gap-1.5 py-1; }
/* Bean hero header: title/byline on the left, rating fills empty space on the right. Wraps the rating to a new line on narrow screens. */ .bean-hero-row { @apply flex flex-wrap items-end justify-between gap-x-6 gap-y-3; }
.bean-hero-text { @apply min-w-0; flex: 1 1 auto; }
.bean-hero-row .brew-rating-hero { @apply flex-shrink-0; }
.brew-summary { @apply flex flex-wrap items-center gap-x-8 gap-y-4 mb-6 pb-5; border-bottom: 1px solid var(--surface-border); }
.brew-summary-stats { @apply flex flex-wrap gap-x-6 gap-y-3; flex: 1 1 auto; }
.brew-summary-stat { @apply flex flex-col gap-0.5; }
.brew-summary-stat dt { @apply uppercase tracking-wider; font-size: 0.65rem; color: var(--text-muted); }
.brew-summary-stat dd { @apply text-base font-semibold; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.brew-rating-value { @apply font-bold tracking-tight leading-none; font-size: clamp(3.25rem, 6vw + 1rem, 4.5rem); color: var(--rating-text); /* Trim the line-box to the cap/alphabetic edges so the big number sits flush against the "/ 10" baseline without phantom leading whitespace. Progressive enhancement — older browsers ignore these. */ text-box: trim-both cap alphabetic; }
.brew-rating-max { @apply text-xs font-medium uppercase tracking-wider; color: var(--text-muted); }
/* ── Treatment 1: Brew Journal ── Dot-grid paper, ledger-style fields, for brews/recipes/equipment */
.record-journal { background-color: var(--journal-bg); background-image: var(--texture-dotgrid); @apply rounded-lg; }
/* Ledger field: label left, value right, separated by faint line */ .journal-field { @apply flex items-baseline justify-between py-3; border-bottom: 1px solid var(--surface-border); }
.journal-field:last-child { border-bottom: none; }
.journal-field .detail-label { @apply flex-shrink-0; width: 9rem; }
.journal-field .detail-value, .journal-field .detail-value-lg { @apply text-right flex-1; }
.journal-field a.detail-value { @apply text-right; }
/* On mobile, stack journal fields vertically */ @media (max-width: 480px) { .journal-field { @apply flex-col items-start gap-1; } .journal-field .detail-value, .journal-field .detail-value-lg { @apply text-left; } }
/* Section heading inside the journal ledger — separates Inputs/Process/Output */ .ledger-section { @apply text-xs font-semibold uppercase mt-7 mb-1 pb-1; letter-spacing: 0.18em; color: var(--text-muted); border-bottom: 1px solid var(--surface-border); } .ledger-section:first-child { @apply mt-0; }
/* Kraft tape chip — used for recipe fork provenance */ .fork-chip { @apply inline-flex items-center gap-1 text-xs font-medium px-3 py-1 mb-5; background-color: var(--kraft-bg); background-image: var(--texture-kraft); color: var(--text-secondary); border: 1px solid var(--surface-border); border-radius: 2px; transform: rotate(-1.25deg); box-shadow: var(--shadow-sm); } .fork-chip a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--text-faint); text-underline-offset: 2px; } .fork-chip a:hover { text-decoration-color: var(--text-muted); }
/* Pour rows: shared by brew and recipe views */ .pour-row { @apply flex gap-4 text-sm py-2; border-bottom: 1px solid var(--surface-border); } .pour-row:last-child { border-bottom: none; }
/* Prose section in journal context */ .journal-prose { @apply whitespace-pre-wrap leading-relaxed; color: var(--text-primary); }
/* Bean reference inside a journal brew page */ .journal-bean-ref { @apply rounded-lg p-4 mb-2; background: var(--surface-bg); transition: background 0.15s ease; }
.journal-bean-ref:hover { background: var(--type-bean-tint); }
/* ── Treatment 2: Craft Label ── Kraft paper texture, bold typographic hierarchy, for beans/roasters */
.record-label { background-color: var(--kraft-bg); background-image: var(--texture-kraft); @apply rounded-lg; }
/* Origin hero — the biggest element on a bean label */ .label-origin-hero { @apply text-3xl sm:text-4xl font-bold tracking-tight leading-tight; color: var(--text-primary); }
/* Roaster byline under bean name */ .label-byline { @apply text-sm mt-1; color: var(--text-muted); }
.label-byline a { color: var(--text-secondary); }
.label-byline a:hover { text-decoration: underline; color: var(--text-primary); }
/* Inline tag strip: variety / process / roast level — stamp marks, not pills */ .label-tags { @apply flex flex-wrap gap-x-3 gap-y-2 mt-5; }
.label-tag { @apply text-[0.7rem] font-semibold uppercase px-2.5 py-1; letter-spacing: 0.14em; background: transparent; color: var(--text-secondary); border: 1px solid var(--text-muted); border-radius: 2px; }
.label-tag-closed { color: var(--text-muted); border-color: var(--text-faint); border-style: dashed; }
/* Category-tinted label tags — muted, earthy hues that fit the palette. Use bg + border + text together so each pill reads as one tone. */ .label-tag-origin { background: #eef0e8; border-color: #b6c0a6; color: #4a5a3a; }
.label-tag-variety { background: #efe5ec; border-color: #b89aae; color: #5c3a52; }
.label-tag-process { background: #e7ebef; border-color: #a4b1bd; color: #3e4a57; }
/* Roast level — graduated amber/brown by darkness */ .label-tag-roast-1 { background: #fdf3dc; border-color: #e6c97a; color: #6b4f1a; } .label-tag-roast-2 { background: #f7e6c2; border-color: #d4a85a; color: #5a3d10; } .label-tag-roast-3 { background: #ebd2a4; border-color: #b88947; color: #4a2f0c; } .label-tag-roast-4 { background: #d9b483; border-color: #8a6332; color: #3a2408; } .label-tag-roast-5 { background: #b8895a; border-color: #5e3f1c; color: #2a1604; } .label-tag-roast-6 { background: #6b4423; border-color: #2a1604; color: #fdf3dc; }
/* Description on a label — flowing paragraph, no indent */ .label-description { @apply leading-relaxed mt-6; color: var(--text-primary); max-width: 65ch; }
/* Stacked detail for label pages (location, website) */ .label-detail { @apply flex flex-col gap-1 py-3; border-bottom: 1px solid var(--surface-border); }
.label-detail:last-child { border-bottom: none; }
/* Form field groups — semantic clusters within modals */ .form-fieldset { @apply space-y-3; }
.form-fieldset-label { @apply text-xs font-medium uppercase tracking-wider mb-1; color: var(--text-muted); }
.form-divider { border-top: 1px solid var(--surface-border); @apply my-2; }
.form-optional-hint { @apply text-xs; color: var(--text-faint); }
/* Form validation errors */ .form-error { @apply text-xs mt-1 block; color: #b91c1c; }
:root[data-theme="dark"] .form-error, .dark .form-error { color: #fca5a5; }
.form-input-error { border-color: #b91c1c; }
.form-input-error:focus { border-color: #b91c1c; box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.15); }
/* Buttons */ .btn { @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors cursor-pointer; }
.btn-primary { @apply btn text-white; background: var(--btn-primary-bg); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-secondary { @apply btn; background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-tertiary { @apply btn text-white; background: var(--btn-primary-bg); }
.btn-tertiary:hover { background: var(--btn-primary-bg-hover); }
.btn-link { color: var(--text-muted); @apply font-medium underline transition-colors cursor-pointer; }
.btn-link:hover { color: var(--text-primary); }
.btn-danger { @apply text-red-600 hover:text-red-800 font-medium underline transition-colors cursor-pointer; }
/* Forms */ .form-label { @apply block text-sm font-medium mb-2; color: var(--text-primary); }
.form-input { @apply rounded-lg text-base py-2 px-3; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.form-input:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 2px var(--input-ring-focus); background: var(--input-bg-focus); outline: none; }
/* Hide number input spinners */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; }
.form-input::placeholder { color: var(--text-placeholder); }
/* Select/option dark mode fix — native <option> elements need explicit colors */ select.form-input option, select.form-input optgroup { background: var(--input-bg); color: var(--text-primary); }
.form-input-lg { @apply form-input py-3 px-4; }
/* Combo select dropdown */ .combo-select { @apply relative; }
.combo-dropdown { @apply absolute z-50 w-full mt-1 rounded-lg overflow-hidden; background: var(--card-bg); border: 1px solid var(--input-border); box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; }
.combo-section-label { @apply text-xs font-medium uppercase tracking-wider px-3 py-1.5; color: var(--text-muted); background: var(--surface-bg); }
.combo-item { @apply px-3 py-2 cursor-pointer text-sm; color: var(--text-primary); }
.combo-item:hover, .combo-item[data-highlighted="true"] { background: var(--surface-bg); }
.combo-item-create { @apply px-3 py-2 cursor-pointer text-sm font-medium; color: var(--accent-primary); border-top: 1px solid var(--surface-border); }
.combo-item-create:hover, .combo-item-create[data-highlighted="true"] { background: var(--surface-bg); }
.combo-item-sub { @apply text-xs; color: var(--text-muted); }
.combo-creating { @apply px-3 py-2 text-sm text-center; color: var(--text-muted); }
.form-select { @apply form-input truncate max-w-full min-w-0; }
.form-textarea { @apply form-input min-h-[100px]; }
/* Tables */ .table-container { background: var(--table-bg); border: 1px solid var(--table-border); @apply rounded-lg overflow-hidden; box-shadow: var(--shadow-sm); }
.table { @apply min-w-full; border-collapse: collapse; }
.table-header { background: var(--table-header-bg); border-bottom: 1px solid var(--table-border); }
.table-th { @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wider; color: var(--text-muted); }
.table-body { background: var(--table-bg); }
.table-body tr { border-bottom: 1px solid var(--table-divider); }
.table-body tr:last-child { border-bottom: none; }
.table-row { transition: background-color 150ms ease; }
.table-row:hover { background: var(--table-row-hover); }
.table-td { @apply px-6 py-4 whitespace-nowrap text-sm; color: var(--text-secondary); }
/* Modals */ .modal-backdrop { @apply fixed inset-0 flex items-center justify-center z-50 p-4; background: var(--modal-backdrop); /* backdrop-filter removed — solid overlay for performance */ }
.modal-content { background: var(--modal-bg); border: 1px solid var(--modal-border); color: var(--text-primary); @apply rounded-xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto; box-shadow: var(--shadow-lg); }
.modal-title { @apply text-xl font-semibold mb-4; color: var(--text-primary); }
/* Native Dialog Element */ .modal-dialog { @apply p-0 bg-transparent border-none shadow-none max-w-md w-full; }
.modal-dialog::backdrop { background: var(--modal-backdrop); /* backdrop-filter removed — solid overlay for performance */ }
.modal-dialog .modal-content { background: var(--modal-bg); border: 1px solid var(--modal-border); color: var(--text-primary); @apply rounded-xl p-6 w-full max-h-[90vh] overflow-y-auto; box-shadow: var(--shadow-lg); }
/* Handle autocomplete typeahead dropdown */ .handle-dropdown { @apply absolute z-10 w-full mt-1 rounded-lg max-h-60 overflow-y-auto; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-lg); }
.handle-result { @apply px-3 py-2 cursor-pointer flex items-center gap-2 transition-colors; color: var(--text-primary); }
.handle-result:hover { background: var(--surface-bg); }
.handle-result .handle-name { @apply font-medium text-sm truncate; color: var(--text-primary); }
.handle-result .handle-at { @apply text-xs truncate; color: var(--text-muted); }
.handle-no-results { @apply px-4 py-3 text-sm; color: var(--text-muted); }
/* Entity suggestion typeahead dropdown */ .suggestions-dropdown { @apply absolute z-50 left-0 right-0 mt-1 rounded-lg max-h-48 overflow-y-auto; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-md); }
.suggestions-item { @apply w-full text-left px-3 py-2 flex items-center gap-2 transition-colors cursor-pointer last:border-b-0; color: var(--text-primary); border-bottom: 1px solid var(--surface-border); }
.suggestions-item:hover { background: var(--surface-bg); }
/* Typography */ .section-title { @apply text-xs font-semibold uppercase tracking-widest mb-4; color: var(--text-faint); }
.page-title { @apply text-2xl font-semibold; color: var(--text-primary); }
/* Feed Components — Sticky Notes on Corkboard */ .feed-card { background-color: var(--feed-card-bg); border: none; @apply rounded p-3 sm:p-4 transition-all duration-200; box-shadow: 1px 2px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); break-inside: avoid; overflow: hidden; }
.feed-card:hover { box-shadow: var(--shadow-md); }
/* Sticky-note rotation only inside the feed pinboard. Uses the independent `rotate` property so it doesn't conflict with the fade-in-slide-up animation's `transform`. */ @media (min-width: 768px) { .feed-grid .feed-card { rotate: var(--card-rotate, 0deg); backface-visibility: hidden; }
.feed-grid .feed-card:hover { rotate: 0deg; transform: translateY(-2px); }
/* --card-rotate values are assigned per-card via JS in feed-masonry.js */ }
/* Brew cards — the main sticky note, slightly larger presence */ .feed-card-brew { background-color: var(--feed-card-bg); background-image: linear-gradient(var(--type-brew-tint), var(--type-brew-tint)); @apply rounded; box-shadow: 2px 3px 6px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08); }
.feed-card-brew:hover { box-shadow: 3px 4px 10px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); }
/* Compact cards — equipment and roasters */ .feed-card-compact { @apply p-2.5 sm:p-3 rounded-lg; }
/* Feed card type tints — colored sticky notes */ .feed-card-bean { background-color: var(--feed-card-bg); background-image: linear-gradient(var(--type-bean-tint), var(--type-bean-tint)); } .feed-card-recipe { background-color: var(--feed-card-bg); background-image: linear-gradient(var(--type-recipe-tint), var(--type-recipe-tint)); } .feed-card-roaster { background-color: var(--feed-card-bg); background-image: linear-gradient(var(--type-roaster-tint), var(--type-roaster-tint)); } .feed-card-grinder { background-color: var(--feed-card-bg); background-image: linear-gradient(var(--type-grinder-tint), var(--type-grinder-tint)); } .feed-card-brewer { background-color: var(--feed-card-bg); background-image: linear-gradient(var(--type-brewer-tint), var(--type-brewer-tint)); }
/* Feed grid layout — starts as normal grid, JS adds masonry class for tight packing */ .feed-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; overflow: hidden; background-image: var(--texture-cork); background-color: var(--feed-board-bg); @apply rounded-xl p-3 sm:p-5; border: 1px solid var(--feed-board-border); box-shadow: inset 0 2px 8px rgba(0,0,0,0.12); }
.feed-masonry-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
@media (min-width: 768px) { .feed-grid { grid-template-columns: repeat(2, 1fr); column-gap: 1.25rem; row-gap: 1.25rem; }
.feed-masonry-col { gap: 1.25rem; } }
/* Brew cards get extra presence without spanning columns */ .feed-card-brew { @apply p-4 sm:p-5; }
/* Inner content boxes inside tinted cards — blend with outer card */ .feed-card .feed-content-box, .feed-card .feed-content-box-sm { background: transparent; }
/* Type badges — inline pill with icon + label */ .type-badge { @apply inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium; border: 1px solid currentColor; opacity: 0.8; }
.type-badge svg { color: inherit; width: 0.75rem; height: 0.75rem; }
.type-badge-brew { color: var(--type-brew); } .type-badge-bean { color: var(--type-bean); } .type-badge-recipe { color: var(--type-recipe); } .type-badge-roaster { color: var(--type-roaster); } .type-badge-grinder { color: var(--type-grinder); } .type-badge-brewer { color: var(--type-brewer); }
/* Entity card type dot — small colored indicator in card headers */ .entity-card-dot { @apply inline-block w-2 h-2 rounded-full flex-shrink-0; }
.entity-card-dot-bean { background: var(--type-bean); } .entity-card-dot-roaster { background: var(--type-roaster); } .entity-card-dot-grinder { background: var(--type-grinder); } .entity-card-dot-brewer { background: var(--type-brewer); } .entity-card-dot-recipe { background: var(--type-recipe); }
.feed-content-box { background: var(--surface-bg); @apply rounded-lg p-3 sm:p-4; }
.feed-content-box-sm { background: var(--surface-bg); @apply rounded-lg p-2 sm:p-3; }
/* Avatar - base styles */ .avatar { @apply rounded-full object-cover transition-all duration-200; }
.avatar-sm { @apply avatar w-8 h-8 ring-2 ring-brown-500 hover:ring-brown-400 hover:ring-4; }
.avatar-md { @apply avatar w-12 h-12 ring-2 ring-brown-500 hover:ring-brown-400 hover:ring-4; }
.avatar-lg { @apply avatar w-20 h-20 border-2 border-brown-300 hover:border-brown-400 hover:border-4; }
/* Avatar placeholder - for missing images */ .avatar-placeholder { @apply rounded-full bg-brown-300 flex items-center justify-center transition-all duration-200; }
.avatar-placeholder-sm { @apply avatar-placeholder w-8 h-8 ring-2 ring-brown-500 hover:ring-brown-400 hover:ring-4; }
.avatar-placeholder-md { @apply avatar-placeholder w-12 h-12 ring-2 ring-brown-500 hover:ring-brown-400 hover:ring-4; }
.avatar-placeholder-lg { @apply avatar-placeholder w-20 h-20 hover:bg-brown-400; }
/* Avatar text sizing */ .avatar-text-sm { @apply text-brown-600 text-sm; }
.avatar-text-md { @apply text-brown-600 text-base; }
.avatar-text-lg { @apply text-brown-600 text-2xl; }
/* Text Utilities */ .text-helper { @apply text-sm mt-1; color: var(--text-muted); }
.text-meta { @apply text-xs; color: var(--text-muted); }
.text-meta-sm { @apply text-sm; color: var(--text-muted); }
.text-label { color: var(--text-muted); }
.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); }
/* Badges */ .badge-rating { @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium flex-shrink-0; background: var(--rating-bg); color: var(--rating-text); }
.badge-rating-sm { @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium; background: var(--rating-bg); color: var(--rating-text); }
/* Filter Pills */ .filter-pill { @apply inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full transition-all cursor-pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--card-border); }
.filter-pill:hover { color: var(--text-secondary); border-color: var(--input-border-focus); background: var(--surface-bg); }
/* Type-aware hover */ .filter-pill[data-tab="brew"]:hover { border-color: var(--type-brew); color: var(--type-brew); } .filter-pill[data-tab="bean"]:hover { border-color: var(--type-bean); color: var(--type-bean); } .filter-pill[data-tab="recipe"]:hover { border-color: var(--type-recipe); color: var(--type-recipe); } .filter-pill[data-tab="grinder"]:hover { border-color: var(--type-grinder); color: var(--type-grinder); } .filter-pill[data-tab="brewer"]:hover { border-color: var(--type-brewer); color: var(--type-brewer); }
.filter-pill-active { @apply inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full transition-all cursor-pointer; color: var(--btn-primary-text); background: var(--btn-primary-bg); border: 1px solid var(--btn-primary-bg); }
.filter-pill-active:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
/* Type-colored active pills */ .filter-pill-brew, .filter-pill-bean, .filter-pill-recipe, .filter-pill-grinder, .filter-pill-brewer { @apply inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full transition-all cursor-pointer; color: var(--btn-primary-text); }
.filter-pill-brew { background: var(--type-brew); border: 1px solid var(--type-brew); }
.filter-pill-bean { background: var(--type-bean); border: 1px solid var(--type-bean); }
.filter-pill-recipe { background: var(--type-recipe); border: 1px solid var(--type-recipe); }
.filter-pill-grinder { background: var(--type-grinder); border: 1px solid var(--type-grinder); }
.filter-pill-brewer { background: var(--type-brewer); border: 1px solid var(--type-brewer); }
.feed-sort-btn { @apply px-3 py-1.5 text-xs font-medium rounded-full transition-all cursor-pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--card-border); }
.feed-sort-btn:hover { color: var(--text-secondary); border-color: var(--input-border-focus); }
.feed-sort-btn-active { @apply px-3 py-1.5 text-xs font-medium rounded-full transition-all cursor-pointer; color: var(--btn-primary-text); background: var(--btn-primary-bg); border: 1px solid var(--btn-primary-bg); }
/* Links */ .link { color: var(--text-muted); @apply hover:underline transition-colors; }
.link:hover { color: var(--text-primary); }
.link-bold { color: var(--text-muted); @apply font-medium hover:underline transition-colors; }
.link-bold:hover { color: var(--text-primary); }
/* Like Button */ .like-btn { @apply inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-sm font-medium transition-colors min-h-[44px]; }
.like-btn-liked { @apply like-btn text-red-600; background: transparent; animation: like-pop 400ms ease-out; }
.like-btn-liked:hover { background: var(--surface-bg); }
.like-btn-unliked { @apply like-btn; color: var(--text-muted); background: transparent; animation: like-shrink 200ms ease-out; }
.like-btn-unliked:hover { background: var(--surface-bg); }
/* Share Button */ .share-btn { @apply inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-sm font-medium transition-colors min-h-[44px]; color: var(--text-muted); background: transparent; }
.share-btn:hover { background: var(--surface-bg); }
/* Comment Button */ .comment-btn { @apply inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-sm font-medium transition-colors min-h-[44px]; color: var(--text-muted); background: transparent; }
.comment-btn:hover { background: var(--surface-bg); }
/* Comment Section */ .comment-section { @apply mt-8 pt-6; border-top: 2px solid var(--card-border); }
.comment-section-header { @apply mb-5; }
.comment-count-badge { @apply inline-flex items-center justify-center text-xs font-bold bg-brown-700 text-brown-100 rounded-full min-w-[1.375rem] h-[1.375rem] px-1.5; }
.comment-login-prompt { @apply flex items-center gap-3 rounded-lg p-4 mb-5 border border-dashed; background: var(--surface-bg); border-color: var(--card-border); }
.comment-compose { @apply rounded-lg p-4 mb-5 flex flex-col gap-2; background: var(--surface-bg); border: 1px solid var(--card-border); }
.comment-textarea { @apply w-full rounded-lg px-3 py-2.5 text-base resize-none transition-colors focus:ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400/50; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-primary); }
.comment-textarea::placeholder { color: var(--text-placeholder); }
.comment-textarea:focus { border-color: var(--input-border-focus); }
.comment-list { @apply space-y-1; }
.comment-empty-state { @apply text-center py-8; }
.comment-item { @apply relative rounded-lg p-3 transition-colors; }
.comment-item:hover { background: var(--surface-bg); }
.comment-item-inner { @apply relative; }
.comment-depth-1 { @apply ml-6 pl-4; }
.comment-depth-2 { @apply ml-12 pl-4; }
.comment-thread-line { @apply absolute left-0 top-3 bottom-3 w-0.5 rounded-full; background: var(--card-border); }
.comment-reply-btn { @apply inline-flex items-center gap-1 transition-colors text-xs font-medium; color: var(--text-placeholder); }
.comment-reply-btn:hover { color: var(--text-muted); }
.comment-delete-btn { @apply transition-colors; color: var(--text-placeholder); }
.comment-delete-btn:hover { color: var(--text-muted); }
.comment-reply-form { @apply flex flex-col gap-2 rounded-lg p-3; background: var(--surface-bg); border: 1px solid var(--card-border); }
/* Action Bar */ .action-bar { @apply flex items-center gap-2 mt-3 pt-3; border-top: 1px solid var(--surface-border); }
/* Action bar inside brew view container - no separator needed */ .brew-view-actions .action-bar { @apply mt-0 pt-0 border-t-0; }
/* Compact action bar variant for comments */ .comment-item .action-bar { @apply mt-1 border-t-0 gap-1 rounded-lg px-1.5 py-1 inline-flex items-center; background: var(--surface-bg); }
.comment-item .action-btn, .comment-item .like-btn { @apply px-2 py-1 text-xs min-h-[28px] bg-transparent; }
.action-btn { @apply inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer min-h-[44px]; color: var(--text-muted); background: transparent; }
.action-btn:hover { background: var(--surface-bg); color: var(--text-secondary); }
.action-btn-liked { @apply text-red-600; animation: like-pop 400ms ease-out; }
.action-btn-disabled { @apply opacity-50 cursor-not-allowed; }
.action-btn-disabled:hover { background: transparent; }
/* Action Menu (More dropdown) */ .action-menu { @apply absolute left-1/2 -translate-x-1/2 w-36 rounded-lg py-1 z-50; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-md); }
/* Dropdown menu (top-positioned, for headers/nav) */ .dropdown-menu { @apply absolute right-0 mt-2 w-48 rounded-lg py-1 z-50; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-md); }
.dropdown-item { @apply block px-4 py-2 text-sm transition-colors; color: var(--text-muted); }
.dropdown-item:hover { background: var(--surface-bg); }
.dropdown-item-disabled { @apply block px-4 py-2 text-sm cursor-not-allowed; color: var(--text-placeholder); }
.dropdown-item-mod { @apply text-amber-700; }
.dropdown-item-mod:hover { @apply bg-amber-50; }
.dropdown-header { @apply px-4 py-2; border-bottom: 1px solid var(--surface-border); }
.dropdown-divider { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--surface-border); }
.action-menu-item { @apply flex items-center gap-2 w-full px-3 py-2 text-sm transition-colors cursor-pointer text-left; color: var(--text-muted); }
.action-menu-item:hover { background: var(--surface-bg); }
.action-menu-item-danger { @apply text-red-600; }
.action-menu-item-danger:hover { @apply bg-red-50; }
.action-menu-item-warning { @apply text-amber-600; }
.action-menu-item-warning:hover { @apply bg-amber-50; }
.action-menu-divider { @apply my-1; border-top: 1px solid var(--surface-border); }
/* Hidden record indicator badge */ .hidden-badge { @apply inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-700 rounded; }
/* Alert banners */ .alert-warning { @apply rounded-lg p-4; background: var(--alert-warning-bg); border: 1px solid var(--alert-warning-border); color: var(--alert-warning-text); }
.alert-warning-muted { color: var(--alert-warning-text-muted); }
/* Home page action buttons */ .home-action-primary { @apply inline-flex items-center justify-center font-medium transition-all cursor-pointer; background: linear-gradient(135deg, #6b4423, #4a2c2a); color: #FAF7F5; border: 1px solid #6b4423; box-shadow: var(--shadow-sm); }
.home-action-primary:hover { box-shadow: var(--shadow-md); filter: brightness(1.1); }
.home-action-secondary { @apply inline-flex items-center justify-center font-medium transition-all cursor-pointer; background: var(--card-bg); color: var(--text-primary); border: 1.5px solid var(--card-border); box-shadow: var(--shadow-sm); }
.home-action-secondary:hover { border-color: var(--input-border-focus); box-shadow: var(--shadow-md); }}
/* ======================================== HTMX Transition Classes ======================================== */
/* CRITICAL: Prevent content from being stuck invisible during history restore *//* Override HTMX transition classes during history restoration */body.htmx-history-restoring main,body.htmx-history-restoring .htmx-swapping,body.htmx-history-restoring .htmx-transitioning { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;}
/* During swap transition */.htmx-swapping { opacity: 0; transform: translateY(5px); transition: opacity 100ms ease-out, transform 100ms ease-out;}
/* After content is added */.htmx-added { opacity: 0; animation: fade-in-slide-up 200ms ease-out forwards;}
/* During settling phase */.htmx-settling { opacity: 1; transform: translateY(0); transition: opacity 100ms ease-in, transform 100ms ease-in;}
/* Transitioning state (no overlay - looks bad) */.htmx-transitioning { position: relative; /* Removed overlay ::after pseudo-element - it created unwanted shadow effects */}
/* ======================================== Component-Specific Transitions ======================================== */
/* Feed cards appear with stagger effect (only inside the pinboard) */.feed-grid .feed-card { animation: fade-in-slide-up 300ms ease-out backwards;}
.feed-grid .feed-card:nth-child(1) { animation-delay: 0ms; }.feed-grid .feed-card:nth-child(2) { animation-delay: 60ms; }.feed-grid .feed-card:nth-child(3) { animation-delay: 120ms; }.feed-grid .feed-card:nth-child(4) { animation-delay: 160ms; }.feed-grid .feed-card:nth-child(5) { animation-delay: 200ms; }.feed-grid .feed-card:nth-child(6) { animation-delay: 230ms; }.feed-grid .feed-card:nth-child(n + 7) { animation-delay: 260ms; }
/* Modal transitions (enhanced) */.modal-backdrop { animation: fade-in 100ms ease-out;}
.modal-content { animation: modal-appear 150ms ease-out;}
@keyframes modal-appear { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); }}
/* HTML5 Dialog Element Transitions */.modal-dialog { opacity: 0; transform: scale(0.95); transition: opacity 100ms ease-out, transform 100ms ease-out, overlay 100ms ease-out allow-discrete, display 100ms ease-out allow-discrete;}
.modal-dialog[open] { opacity: 1; transform: scale(1);}
/* Backdrop fade-in transition */.modal-dialog::backdrop { background-color: rgba(0, 0, 0, 0); transition: background-color 100ms ease-out, backdrop-filter 100ms ease-out, display 100ms ease-out allow-discrete, overlay 100ms ease-out allow-discrete;}
.modal-dialog[open]::backdrop { background-color: rgba(0, 0, 0, 0.4);}
/* Starting style for new browsers that support @starting-style */@supports (transition-behavior: allow-discrete) { @starting-style { .modal-dialog[open] { opacity: 0; transform: scale(0.95); }
.modal-dialog[open]::backdrop { background-color: rgba(0, 0, 0, 0); } }}
/* Modal content inside dialog - no separate animation needed *//* The dialog element itself handles the transition */
/* ======================================== Keyframes ======================================== */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; }}
@keyframes fade-in-slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }}
/* Like button pop animation */@keyframes like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); }}
/* Like button shrink animation for unlike */@keyframes like-shrink { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); }}
/* ======================================== Loading States ======================================== */
/* Enhance skeleton loading animations */.animate-pulse { animation: enhanced-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
@keyframes enhanced-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; }}
/* ======================================== Reduced Motion Override ======================================== */
/* Respect user's motion preferences */@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}