:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: #16253d; background: #fff; font-synthesis: none; --blue: #1e4dd8; --line: #e4e9f1; --muted: #59677e; } /* Definierar gemensam typografi och färgvariabler. */
* { box-sizing: border-box; } /* Gör mått förutsägbara inklusive kant och inre avstånd. */
body { margin: 0; font-size: 16px; line-height: 1.55; } /* Ger läsbar grundstorlek utan webbläsarmarginal. */
button, input, textarea { font: inherit; } /* Låter formulär följa samma läsbara typografi. */
button { border: 1px solid var(--line); border-radius: 10px; background: #fff; color: inherit; padding: 10px 16px; cursor: pointer; min-height: 44px; font-weight: 600; } /* Ger tydliga knappar med tillräcklig tryckyta. */
button:hover { background: #eef3ff; border-color: #b9c9ef; } /* Visar pekarrespons utan att flytta layouten. */
button:disabled { opacity: .55; cursor: not-allowed; } /* Gör otillgängliga funktioner synligt inaktiva. */
:focus-visible { outline: 3px solid #4b75ed; outline-offset: 3px; } /* Visar tangentbordsfokus med stark kontrast. */
input, textarea { width: 100%; min-width: 0; border: 1px solid #bdc8da; border-radius: 9px; padding: 11px 12px; background: #fff; color: inherit; } /* Ger konsekventa och responsiva inmatningsfält. */
textarea { resize: vertical; min-height: 110px; } /* Tillåter större textfält men förhindrar breddöverflöde. */
label { display: block; font-size: .875rem; font-weight: 650; margin: 15px 0 6px; } /* Kopplar visuellt varje etikett till sitt fält. */
h1, h2, h3, p { margin-top: 0; } /* Tar bort oavsiktligt extra utrymme före text. */
h1 { font-size: clamp(1.8rem, 3.5vw, 2.65rem); letter-spacing: -.04em; line-height: 1.18; margin-bottom: 0; font-weight: 700; } /* Ger huvudrubriken tydlig hierarki på mobil och dator. */
h2 { font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.35; margin-bottom: 12px; } /* Håller sektionsrubriker läsbara och kompakta. */
h3 { font-size: 1rem; margin-bottom: 5px; overflow-wrap: anywhere; } /* Hindrar långa aktivitetsnamn från att spräcka layouten. */
p { margin-bottom: 16px; } /* Ger jämn rytm mellan textstycken. */
[hidden] { display: none !important; } /* Säkerställer att dolda vyer och meddelanden verkligen försvinner. */
.topbar { height: 88px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 4%; gap: 16px; } /* Ordnar apphuvudet med separerad lägesetikett. */
.brand { display: flex; align-items: center; gap: 12px; color: inherit; font-size: 1.3rem; font-weight: 750; text-decoration: none; white-space: nowrap; } /* Håller appnamn och ikon samman. */
.brand span { font-size: .875rem; font-weight: 400; color: var(--muted); border-left: 1px solid var(--line); padding-left: 18px; margin-left: 8px; } /* Gör appbeskrivningen sekundär på stor skärm. */
.local-label, .tag { font-size: .8125rem; color: #425677; background: #eef2f8; border-radius: 6px; padding: 5px 10px; white-space: nowrap; } /* Skiljer prototypstatus från personligt innehåll. */
.shell { display: grid; grid-template-columns: 205px minmax(0, 1fr); max-width: 1480px; margin: auto; min-height: calc(100vh - 88px); } /* Ger en stabil arbetsyta med sidomeny. */
.navigation { padding: 38px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; } /* Arrangerar navigeringen lodrätt på dator. */
.navigation button { text-align: left; border-color: transparent; font-size: .9375rem; padding: 12px; } /* Gör menyn enkel och lätt att träffa. */
.navigation button[aria-current] { background: #edf2ff; color: var(--blue); } /* Markerar aktuell arbetsyta även genom knappens tillgänglighetsattribut. */
#message-count { margin-left: 5px; font-size: .8125rem; } /* Visar antal ohanterade provmeddelanden utan stor indikator. */
.nav-note { margin-top: auto; padding: 32px 12px 0; color: var(--muted); font-size: .875rem; } /* Placerar sekundär text längst ned i sidomenyn. */
main { padding: 44px clamp(22px, 4vw, 60px); min-width: 0; } /* Skyddar huvudytan mot långa barns minsta bredd. */
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; } /* Samlar rubrik och primär åtgärd. */
.eyeline { color: var(--muted); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; } /* Formaterar datum och sektionskontext. */
.primary { background: var(--blue); color: #fff; border-color: var(--blue); } /* Markerar huvudåtgärder med hög kontrast. */
.primary:hover { background: #163dad; border-color: #163dad; } /* Behåller vit text läsbar vid pekarrespons. */
.dark { background: #16253d; color: #fff; border-color: #16253d; } /* Skiljer upptagenknappen från kalenderåtgärder. */
.dark:hover { background: #2a3c59; border-color: #2a3c59; } /* Ger mörka knappar synlig respons. */
.text-button { background: transparent; border-color: transparent; font-size: .875rem; } /* Ger återställning en sekundär visuell tyngd. */
.availability { background: #edf3ff; border: 1px solid #dce6ff; border-radius: 16px; padding: 25px 28px; display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-bottom: 40px; } /* Skapar en sammanhållen tillgänglighetspanel. */
.availability.is-busy { background: #fff6e7; border-color: #f1dcad; } /* Markerar upptagenläge utan att enbart förlita sig på färg. */
.availability h2 { margin: 8px 0 6px; font-size: 1.5rem; } /* Gör aktuell status lätt att läsa. */
.availability p { color: #455774; margin: 0; font-size: .9375rem; } /* Gör statusförklaringen sekundär men läsbar. */
.status-caption { font-size: .75rem; letter-spacing: .09em; font-weight: 700; } /* Skiljer prototypens statusområde från rubriken. */
.status-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } /* Grupperar start och avbryt utan överlapp. */
.day-columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 40px; } /* Ger kalendern mer yta än textinmatningen. */
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; } /* Återanvänder rubrikrad för lista och dialog. */
.section-heading h2 { margin: 0; } /* Hindrar ojämn lodrät centrering av rubriken. */
#event-count, .small { font-size: .8125rem; line-height: 1.6; color: var(--muted); } /* Gör hjälpinformation sekundär och läsbar. */
.date-controls { display: flex; gap: 7px; margin-bottom: 28px; flex-wrap: wrap; } /* Låter datumfält och navigering radbrytas på smala skärmar. */
.date-controls input { flex: 1; min-width: 140px; width: auto; padding: 7px; } /* Bevarar datumfältets användbarhet vid liten bredd. */
.date-controls button { padding: 7px 11px; } /* Håller dagsnavigeringen kompakt med tillräcklig tryckyta. */
.empty { padding: 38px 22px; border: 1px dashed #cbd5e5; border-radius: 12px; margin-bottom: 22px; } /* Gör tomläge synligt utan påhittade aktiviteter. */
.empty p { color: var(--muted); font-size: .9375rem; margin-bottom: 0; } /* Förklarar hur användaren börjar fylla sin dag. */
.event { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); } /* Visar varje aktivitet som tidsrad i en öppen lista. */
.event-time { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--muted); } /* Gör start och slut lätt att jämföra. */
.event-body { border-left: 3px solid #416ae8; padding-left: 18px; } /* Kopplar aktivitetsbeskrivningen visuellt till tidslinjen. */
.event-body button { border: none; background: transparent; text-align: left; padding: 0; min-height: 44px; width: 100%; font-weight: 600; overflow-wrap: anywhere; } /* Gör hela aktivitetsnamnet till en tillgänglig redigeringsknapp. */
.composer { background: #f7f9fc; padding: 28px; border-radius: 14px; align-self: start; } /* Ger inmatningen en avskild men lugn yta. */
.composer > p { color: var(--muted); } /* Håller instruktioner sekundära till inmatningen. */
.voice-mark { color: var(--blue); font-size: 1.5rem; letter-spacing: .15em; margin-bottom: 15px; } /* Använder enkel typografisk röstmarkör utan externt bildmaterial. */
.voice-button { width: 100%; margin: 12px 0 9px; color: var(--blue); } /* Gör diktering lätt att nå före granskningen. */
.full { width: 100%; } /* Låter viktiga panelknappar fylla sin tillgängliga bredd. */
.composer .small { margin-top: 16px; margin-bottom: 0; } /* Separerar viktig röst- och tolkningsinformation. */
.notice { border-left: 3px solid var(--blue); padding: 18px 24px; background: #f2f6ff; margin-bottom: 28px; } /* Markerar telefonins provläge nära huvudåtgärden. */
.notice p { margin: 8px 0 0; color: var(--muted); } /* Håller förklaringen tätt under huvudbeskedet. */
.message { border-bottom: 1px solid var(--line); padding: 24px 0; overflow-wrap: anywhere; } /* Avgränsar provmeddelanden i en läsbar lista. */
.message p { white-space: pre-wrap; } /* Bevarar användarens radbrytningar som ren text. */
.settings-row { padding: 28px 0; border-bottom: 1px solid var(--line); display: flex; align-items: start; gap: 25px; justify-content: space-between; } /* Ordnar anslutningar som raka rader i stället för många kort. */
.settings-row p { max-width: 650px; color: var(--muted); } /* Begränsar radlängd för lättlästa anslutningsförklaringar. */
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } /* Anpassar flera åtgärder till mobilbredd. */
dialog { border: 1px solid var(--line); border-radius: 18px; padding: 28px; width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 40px); color: inherit; overflow: auto; } /* Håller modalen inom skärmen även vid tangentbord och stor text. */
dialog::backdrop { background: #14244380; } /* Avskiljer modalen från bakgrunden. */
.time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Visar start och slut sida vid sida. */
.warning { background: #fff2df; color: #714300; border-radius: 8px; padding: 12px; margin-top: 15px; } /* Gör validerings- och lagringsfel synliga. */
.check-label { display: flex; gap: 10px; align-items: center; } /* Kopplar krockbekräftelse till tydlig text. */
.check-label input { width: 20px; height: 20px; flex-shrink: 0; } /* Gör kryssrutan möjlig att träffa utan att sträckas ut. */
.danger { color: #a02b35; } /* Markerar den lokala raderingsåtgärden. */
.assistant-quote { background: #eff3ff; padding: 16px; border-radius: 10px; margin-top: 20px; } /* Skiljer assistentens manus från användarens inmatning. */
#notice { color: #214a94; margin-top: 24px; overflow-wrap: anywhere; } /* Visar åtgärdsresultat utan ett överlappande toastfönster. */
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Behåller hjälptexter tillgängliga för skärmläsare. */
.skip:focus { display: block; padding: 12px; } /* Visar hopplänken när den får tangentbordsfokus. */
@media (max-width: 1080px) { .day-columns { gap: 24px; grid-template-columns: minmax(0, 1fr); } .composer { width: 100%; } .shell { grid-template-columns: 180px minmax(0, 1fr); } } /* Staplar kalender och inmatning på mindre datorer och surfplattor. */
@media (max-width: 700px) { .topbar { height: 72px; padding: 0 20px; } .brand span { display: none; } .shell { display: block; } .navigation { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; gap: 4px; overflow-x: auto; } .navigation button { white-space: nowrap; flex: 1; text-align: center; padding: 10px 8px; font-size: .875rem; } .nav-note { display: none; } main { padding: 28px 20px; } .page-heading { align-items: start; flex-wrap: wrap; gap: 18px; margin-bottom: 26px; } .availability { padding: 22px; display: block; margin-bottom: 28px; } .status-actions { margin-top: 20px; } .composer { padding: 23px; } .settings-row { flex-wrap: wrap; } .time-fields { gap: 10px; } } /* Ger telefonen en rymlig enkellayout med tillgänglig toppnavigation. */
.shell { grid-template-columns: 165px minmax(0, 1fr); max-width: 1600px; } /* Ger schemat större andel av datorns bredd. */
main { padding: 24px 28px; } /* Minskar yttre avstånd utan att minska textstorleken. */
.topbar { height: 68px; } /* Frigör höjd för kalendern. */
.page-heading { margin-bottom: 18px; gap: 14px; } /* Håller rubrik och skapa-knapp i ett kompakt huvud. */
h1 { font-size: 1.85rem; } /* Anpassar huvudrubriken till ett arbetsverktyg. */
.availability { padding: 12px 18px; margin-bottom: 22px; border-radius: 10px; } /* Gör upptagenstatus till en smal informationsrad. */
.availability h2 { font-size: 1.05rem; margin: 3px 0; } /* Behåller statusen tydlig utan att dominera skärmen. */
.availability p { font-size: .8125rem; } /* Gör telefonstatus till sekundär information. */
.day-columns { display: flex; flex-direction: column; gap: 18px; } /* Ger kalendern full bredd och lägger inmatningen nedanför. */
.agenda { width: 100%; min-width: 0; } /* Låter kalendern krympa inom mobilens skärm. */
.agenda .section-heading { margin-bottom: 12px; flex-wrap: wrap; } /* Håller periodrubrik och antal i en kompakt rad. */
.date-controls { display: inline-flex; margin-bottom: 12px; max-width: 350px; } /* Samlar datumval utan att fylla onödig bredd. */
.calendar-modes { display: inline-flex; gap: 3px; padding: 3px; background: #edf1f7; border-radius: 10px; margin: 0 0 12px 12px; } /* Grupperar dag, vecka och månad som ett tydligt vyval. */
.calendar-modes button { border: 0; background: transparent; padding: 7px 16px; min-height: 40px; } /* Ger vyknapparna jämn och kompakt form. */
.calendar-modes button[aria-pressed="true"] { background: #fff; color: var(--blue); box-shadow: 0 1px 4px #14244318; } /* Markerar aktiv vy även genom aria-pressed. */
.schedule-scroll { max-height: 62vh; min-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; position: relative; overscroll-behavior: contain; } /* Låter kalendern skrollas självständigt på både dator och telefon. */
.schedule-board.week { min-width: 720px; } /* Ger sju dagar läsbar bredd med intern sidledsskroll på telefon. */
.schedule-header, .schedule-body { display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr)); } /* Delar tidsaxel och veckodagar i gemensamma kolumnmått. */
.schedule-board.day .schedule-header, .schedule-board.day .schedule-body { grid-template-columns: 54px minmax(0, 1fr); } /* Dagsvyn använder hela återstående bredden. */
.schedule-header { position: sticky; top: 0; z-index: 4; background: #fff; border-bottom: 1px solid var(--line); } /* Behåller veckodagar synliga när tiden skrollas. */
.schedule-header button { border: 0; border-left: 1px solid var(--line); border-radius: 0; font-size: .875rem; padding: 8px 2px; } /* Skapar tydliga och klickbara dagrubriker. */
.time-heading { font-size: .75rem; color: var(--muted); align-self: center; text-align: center; } /* Märker tidsaxeln utan att ta mycket plats. */
.is-today { background: #edf3ff !important; color: #194ccf; } /* Markerar dagens datum i både schema och månad. */
.time-axis { font-size: .75rem; color: var(--muted); text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; } /* Gör timmarna lätta att jämföra. */
.time-axis > div { height: 48px; } /* Matchar tidsaxeln mot 0,8 pixlar per minut. */
.day-column { display: grid; grid-template-rows: repeat(1440, .8px); border-left: 1px solid var(--line); min-width: 0; } /* Fördelar dygnets 1 440 minuter jämnt och exakt. */
.time-slot { border: 0; border-top: 1px solid #edf0f5; border-radius: 0; padding: 0; min-height: 0; background: transparent; } /* Gör varje tom timme klickbar utan att ändra skalan. */
.time-slot:hover { background: #f4f7ff; } /* Visar var en ny aktivitet kan läggas till. */
.time-event { z-index: 1; min-height: 0; margin: 1px 2px; padding: 2px 5px; border: 0; border-left: 3px solid #1e4dd8; border-radius: 4px; background: #e9f0ff; text-align: left; overflow: hidden; font-size: .8125rem; line-height: 1.25; display: flex; flex-direction: column; align-items: start; } /* Visar tidsblock med exakta intervall och separata överlappsspalter. */
.time-event strong { font-weight: 600; overflow-wrap: anywhere; } /* Tillåter långa aktivitetsnamn utan sidöverflöde. */
.event-clock { font-size: .75rem; font-weight: 400; white-space: nowrap; } /* Håller blockets tidsintervall kompakt. */
.time-event:focus-visible { z-index: 3; overflow: visible; min-height: 44px; box-shadow: 0 3px 12px #16253d33; } /* Gör även korta händelser läsbara när de får tangentbordsfokus. */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } /* Skapar en kompakt hel månadsöversikt. */
.weekday { padding: 10px 4px; text-align: center; font-size: .8125rem; font-weight: 600; border-bottom: 1px solid var(--line); } /* Rubricerar veckodagar utan att blanda ihop dem med datumknappar. */
.month-day { min-height: 108px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; min-width: 0; } /* Håller dagceller jämna och låter innehåll krympa. */
.month-number { border: 0; background: transparent; min-height: 32px; padding: 2px 8px; font-size: .875rem; } /* Öppnar dagsvyn från månadsdatumet. */
.month-event, .month-more { width: 100%; min-height: 24px; border: 0; padding: 3px 5px; border-radius: 3px; background: #eaf0ff; color: #173a84; font-size: .75rem; text-align: left; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; } /* Ger månaden kompakta aktivitetsrader som kan öppnas för full detalj. */
.month-more { background: transparent; color: var(--muted); } /* Låter användaren nå alla aktiviteter på en full dag. */
.outside-month { background: #f7f8fa; color: #68768b; } /* Skiljer angränsande månader utan att dölja deras aktiviteter. */
.google-event { background: #e6f5ee; border-left-color: #157648; color: #175638; } /* Märker framtida eller anslutna Google-händelser med en egen färg. */
.all-day-strip { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 8px 6px 54px; border-bottom: 1px solid var(--line); } /* Ger heldagar en egen rad ovanför klockslagen. */
.all-day-strip button { min-height: 28px; font-size: .8125rem; padding: 4px 8px; } /* Håller heldagsaktiviteter läsbara men kompakta. */
.composer { padding: 0; width: 100%; border: 1px solid var(--line); background: #f7f9fc; } /* Låter den hopfällda röstinmatningen ta minimal höjd. */
.composer summary { padding: 14px 20px; cursor: pointer; font-weight: 600; color: var(--blue); } /* Gör inmatningens öppningsrad lätt att hitta. */
.composer-body { padding: 8px 20px 20px; max-width: 780px; } /* Begränsar formulärets radlängd när panelen är öppen. */
@media (max-width: 700px) { main { padding: 20px 12px; } .shell { display: block; } h1 { font-size: 1.6rem; } .page-heading { gap: 10px; } .availability { padding: 10px 12px; margin-bottom: 18px; } .status-actions { margin-top: 10px; } .status-caption { font-size: .75rem; letter-spacing: .02em; } .calendar-modes { margin-left: 0; display: flex; width: max-content; } .calendar-modes button { padding: 7px 20px; } .schedule-scroll { max-height: 58vh; } .month-day { min-height: 85px; padding: 2px; } .month-number { padding: 3px 7px; } .month-event { padding: 3px 2px; } .navigation { padding: 8px; } } /* Anpassar den kompakta kalendern till Galaxy-liknande telefonbredd. */