/* Hallmark · shape: app screen · genre: modern-minimal · theme: Dose (deal 2/3) · nav: top bar · signature: clock login and two-ID timeline · states: loading, empty, error, full · dose: white · axes: light/grotesk-sans/chromatic-green · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: touch targets and calendar density prioritized; clock screen keeps real accessible input. */
/* Hallmark · waive 39b · clock-screen and clock-set map onto photographed controls · reservation clock digits stay readable at smartphone sizes and the SET target stays at least 44px */
/* Hallmark · waive 38iii · login heading includes the requested for System dev subtitle · BA-RESERVATION title and its product qualifier retain separate sizes without accented words */
:root{--paper:#f5f5f0;--surface:#fffefb;--ink:#183b35;--muted:#5d6e67;--line:#d8e0d9;--accent:#1b6551;--accent-hover:#124b3e;--soft:#e7efe8;--soft-hover:#dce9df;--white:#fff;--clock-digit:#c6e6b9;--clock-off:#244133;--clock-ink:#102519;--clock-rim:#f5efd8;--error:#973b2d;--error-surface:#fcf0eb;--shadow:0 12px 48px #152d2526;--backdrop:#0d231b70;--transparent:transparent;--font-body:"Segoe UI","Yu Gothic UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;--font-display:var(--font-body);--radius:12px;--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--row:44px;--header:72px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}html{scroll-padding-top:var(--header);color-scheme:light}body{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--font-body);font-synthesis:none}::selection{background:var(--soft-hover);color:var(--ink)}[hidden]{display:none!important}button,input,select{font:inherit;color:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.55}button{transition:background-color 140ms var(--ease),transform 140ms var(--ease)}button:active:not(:disabled){transform:translateY(1px)}:where(button,a,input,select,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}input,select{caret-color:var(--accent)}a{color:var(--accent);text-underline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.35;overflow-wrap:break-word;min-width:0;text-wrap:balance}p{text-wrap:pretty}.muted{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.error{color:var(--error);font-size:14px;min-height:0}.error:not(:empty){margin-top:var(--space-sm)}.noscript{padding:var(--space-lg);background:var(--error-surface)}
.login{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--surface)}.login-heading{padding:var(--space-lg) var(--space-md);text-align:center;position:relative;z-index:1}.brand-mark{display:none}.login-heading h1{font-size:28px;font-weight:700;letter-spacing:-.03em}.login-heading h1 span{display:block;font-size:14px;font-weight:400;letter-spacing:0;margin-top:var(--space-2xs)}.login-heading p{font-size:14px;color:var(--muted);margin-top:var(--space-sm)}.login-scene{position:relative;min-height:560px;overflow:clip;background:var(--paper)}.login-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.clock-form{position:absolute;inset:0}.clock-screen{position:absolute;border-radius:6px}.clock-screen svg{width:100%;height:100%;padding:5%;position:absolute;inset:0;pointer-events:none;fill:var(--clock-digit)}.clock-segment.off{fill:var(--clock-off);opacity:.65}.clock-screen input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:2px solid var(--ink);box-shadow:inset 0 0 0 2px var(--clock-digit);border-radius:6px;background:var(--transparent);color:var(--transparent);caret-color:var(--transparent);font-size:24px;text-align:center;cursor:text}.clock-screen input:focus-visible{outline-color:var(--ink);outline-offset:3px;box-shadow:inset 0 0 0 4px var(--clock-digit)}.clock-screen:focus-within svg{filter:drop-shadow(0 0 2px var(--clock-off))}.clock-set{position:absolute;display:grid;place-items:center;min-width:44px;min-height:44px;border:0;border-radius:50%;padding:0;background:var(--transparent);color:var(--ink);font-size:14px;font-weight:700}.clock-set:hover{background:var(--soft)}.clock-set:focus-visible{outline-color:var(--ink)}.clock-set[aria-busy=true]{font-size:11px}.clock-caption{position:absolute;left:var(--space-md);right:var(--space-md);text-align:center;pointer-events:none}.clock-caption>p{width:fit-content;max-width:100%;margin-inline:auto;background:var(--surface);padding:var(--space-2xs) var(--space-sm);border-radius:6px;font-size:14px}.clock-caption>p:empty{display:none}.login-footer{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);font-size:11px;color:var(--muted)}
.app-header{height:var(--header);padding:0 max(var(--space-lg),calc((100% - 960px)/2));background:var(--ink);color:var(--surface);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}.wordmark{display:flex;align-items:center;gap:var(--space-sm);font-size:28px;font-weight:700;text-decoration:none;color:inherit;line-height:1}.wordmark>span{font-size:13px;line-height:1.3;font-weight:700}.wordmark small{display:block;font-size:11px;font-weight:400;opacity:.85}.app-header :focus-visible{outline-color:var(--surface)}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius);background:var(--transparent);padding:0;flex-shrink:0}.icon-button:hover{background:var(--soft)}.app-header .icon-button:hover{background:var(--accent)}.workspace{width:100%;max-width:960px;margin-inline:auto;padding:var(--space-xl) var(--space-lg) 120px}.title-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}.title-row h1{font-size:26px}.title-row p{font-size:14px;margin-top:var(--space-2xs)}.date-nav{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-lg)}.date-control{position:relative;font-weight:700;flex:1;cursor:pointer;min-height:44px;display:flex;align-items:center;padding-inline:var(--space-xs);font-variant-numeric:tabular-nums}.date-control input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.date-control:focus-within{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}.quiet,.primary,.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:48px;border-radius:var(--radius);padding:var(--space-xs) var(--space-md);border:1px solid var(--line);background:var(--surface);font-weight:700;text-decoration:none}.quiet:hover{background:var(--soft)}.small{min-height:44px;font-size:14px;padding:var(--space-xs) var(--space-sm)}.primary{background:var(--accent);color:var(--white);border-color:var(--accent)}.primary:hover{background:var(--accent-hover)}.week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2xs);margin-top:var(--space-sm)}.day{border:1px solid var(--transparent);background:var(--transparent);border-radius:var(--radius);padding:var(--space-xs) 0;display:grid;justify-items:center;gap:var(--space-2xs);min-height:68px;font-variant-numeric:tabular-nums}.day .weekday{font-size:12px;color:var(--muted)}.day .day-number{font-size:19px;font-weight:700;line-height:1.3}.day:hover{background:var(--soft)}.day.is-today{border-color:var(--line)}.day[aria-pressed=true]{background:var(--ink);color:var(--surface)}.day[aria-pressed=true] .weekday{color:var(--surface)}.schedule-meta{display:flex;justify-content:space-between;gap:var(--space-xs);font-size:12px;color:var(--muted);padding:var(--space-lg) 0 var(--space-sm)}.schedule-meta>span:first-child{font-weight:700;color:var(--ink)}.calendar{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);isolation:isolate}.calendar-head{display:grid;grid-template-columns:56px repeat(2,minmax(0,1fr));position:sticky;top:var(--header);z-index:3;background:var(--soft);border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}.calendar-head>div{padding:var(--space-sm) var(--space-xs);border-left:1px solid var(--line);display:flex;align-items:baseline;justify-content:center;gap:var(--space-xs)}.calendar-head strong{font-size:18px;font-variant-numeric:tabular-nums}.calendar-head>div>span{font-size:12px;color:var(--muted)}.time-heading{font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--muted)}.calendar-body{display:grid;grid-template-columns:56px repeat(2,minmax(0,1fr));grid-template-rows:repeat(26,var(--row));position:relative}.time-label{grid-column:1;display:flex;align-items:flex-start;justify-content:center;padding-top:var(--space-2xs);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);border-top:1px solid var(--line)}.time-label.half{font-size:11px;opacity:.8;border-top:1px dashed var(--line)}.slot{border:0;border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--transparent);font-size:12px;color:var(--muted);padding:0;min-width:0;border-radius:0}.slot.half{border-top-style:dashed}.slot:hover:not(:disabled){background:var(--soft-hover);color:var(--accent)}.slot:focus-visible{outline-offset:-4px;z-index:1}.slot:disabled{background:var(--paper);color:var(--muted);cursor:not-allowed}.calendar[aria-busy=true] .slot{color:var(--transparent);background:var(--paper)}.reservation{z-index:2;align-self:stretch;margin:var(--space-2xs);padding:var(--space-2xs) var(--space-xs);min-width:0;overflow:hidden;text-align:left;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-start;font-size:13px;line-height:1.35}.reservation:hover{background:var(--soft-hover)}.reservation:focus-visible{outline-offset:-3px}.reservation strong{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:0}.reservation .res-location{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.reservation .res-time{font-size:11px;font-variant-numeric:tabular-nums;margin-top:var(--space-2xs)}.reservation.short{justify-content:center;gap:0;font-size:11px;padding-block:0}.reservation.short strong{font-size:12px}.reservation.short .res-time{display:none}.reservation.past{background:var(--paper);color:var(--muted)}.calendar-end{display:grid;grid-template-columns:56px 1fr;border-top:1px solid var(--line);font-size:11px;color:var(--muted);padding-block:var(--space-xs);text-align:center}.calendar-end span:last-child{text-align:right;padding-right:var(--space-md)}.schedule-status{font-size:12px;color:var(--muted);padding-block:var(--space-sm)}.sync-error{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding:var(--space-sm);background:var(--error-surface);color:var(--error);font-size:13px;margin-bottom:var(--space-sm);border-radius:var(--radius)}.usage{margin-top:var(--space-lg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.usage summary{min-height:60px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);font-size:14px;font-weight:700;cursor:pointer}.usage summary::-webkit-details-marker{display:none}.usage[open] summary svg{transform:rotate(180deg)}.usage-body{padding:var(--space-sm) 0 var(--space-lg);font-size:14px;max-width:70ch}.usage h2{font-size:16px}.usage ul{padding-left:var(--space-lg);margin-block:var(--space-sm)}.usage li{margin-block:var(--space-sm)}.usage li p{color:var(--muted);font-size:13px;margin-top:var(--space-2xs)}.usage a{overflow-wrap:anywhere}.app-footer{font-size:11px;color:var(--muted);padding-top:var(--space-lg)}.booking-dock{position:fixed;bottom:0;left:0;right:0;z-index:4;padding:var(--space-sm) max(var(--space-lg),calc((100% - 912px)/2));padding-bottom:max(var(--space-sm),env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}.booking-dock>span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.booking-dock .primary{min-width:200px}
.booking-dialog{border:0;padding:var(--space-lg);width:460px;max-width:calc(100% - 32px);max-height:90svh;border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overscroll-behavior:contain}.booking-dialog::backdrop{background:var(--backdrop)}.sheet-handle{display:none}.sheet-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.sheet-heading h2{font-size:22px}.field{display:grid;gap:var(--space-xs);font-size:14px;font-weight:700;margin-top:var(--space-md)}.field input,.field select{width:100%;height:50px;border:1px solid var(--muted);border-radius:var(--radius);padding:var(--space-xs) var(--space-sm);background:var(--surface);font-weight:400;min-width:0;max-width:100%;font-size:16px}.field input::placeholder{color:var(--muted);opacity:1}.field input:user-invalid{border-color:var(--error)}.field-help{font-size:12px;color:var(--muted);font-weight:400;margin-top:calc(-1 * var(--space-xs))}.time-fields{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:var(--space-sm)}.time-fields>span{padding-bottom:var(--space-sm);color:var(--muted)}.duration{font-size:12px;color:var(--muted);margin-top:var(--space-xs)}.id-selector{padding:0;margin:0;border:0}.id-selector legend{font-size:14px;font-weight:700;margin-bottom:var(--space-xs)}.id-selector>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}.id-selector input{position:absolute;opacity:0;width:1px;height:1px}.id-selector label{display:flex;gap:var(--space-xs);justify-content:center;align-items:center;min-height:52px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}.id-selector label strong{font-size:16px}.id-selector label span{font-size:11px;color:var(--muted)}.id-selector input:checked+label{background:var(--soft);border-color:var(--accent)}.id-selector input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px}.id-selector input:disabled+label{background:var(--paper);color:var(--muted);border-color:var(--line);cursor:not-allowed}.sheet-actions{display:flex;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-lg)}.sheet-actions .primary{flex:1}.danger{color:var(--error)}.sheet-note{font-size:11px;color:var(--muted);text-align:center;margin-top:var(--space-sm)}.delete-confirm h3{font-size:20px;margin-bottom:var(--space-sm)}.delete-confirm p{font-size:14px;overflow-wrap:anywhere}.delete-confirm>div{display:flex;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-lg)}.danger-button{background:var(--error);color:var(--white);border-color:var(--error)}.danger-button:hover{opacity:.9}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius);background:var(--ink);color:var(--surface);font-size:14px;box-shadow:var(--shadow);z-index:20;text-align:center}
@media(min-width:1000px){.login-heading{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);padding:var(--space-lg)}.brand-mark{display:block}.login-heading h1{text-align:left;font-size:32px}.login-heading h1 span{font-size:13px}.login-heading p{margin:0;padding-left:var(--space-lg);border-left:1px solid var(--line)}.login-scene{min-height:600px}.clock-caption>p{font-size:16px}.clock-set{font-size:18px}}
@media(max-width:600px){:root{--header:64px}.workspace{padding:var(--space-lg) var(--space-md) 120px}.app-header{padding-inline:var(--space-md)}.title-row h1{font-size:23px}.calendar-head{grid-template-columns:44px repeat(2,minmax(0,1fr))}.calendar-head>div{flex-direction:column;align-items:center;gap:0;padding:var(--space-xs)}.calendar-head strong{font-size:17px}.calendar-head>div>span{font-size:11px}.calendar-body{grid-template-columns:44px repeat(2,minmax(0,1fr))}.calendar-end{grid-template-columns:44px 1fr}.time-label{font-size:11px}.booking-dock{padding-inline:var(--space-md)}.booking-dock .primary{min-width:180px}.booking-dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:92svh;border-radius:20px 20px 0 0;padding:var(--space-sm) var(--space-lg) max(var(--space-lg),env(safe-area-inset-bottom))}.sheet-handle{display:block;width:36px;height:4px;margin:0 auto var(--space-xs);border-radius:4px;background:var(--line)}.sheet-heading{margin-bottom:var(--space-md)}.login-scene{min-height:0;height:min(145vi,650px)}.login-footer{padding-inline:var(--space-md);font-size:10px;gap:var(--space-xs)}.clock-caption>p{font-size:12px}.clock-set{font-size:12px}.login{grid-template-rows:auto auto 1fr}.login-footer{align-items:flex-end;min-height:48px}.login-heading{padding-top:var(--space-xl);padding-bottom:var(--space-lg)}}
.slot:disabled{color:var(--muted);cursor:not-allowed}.id-selector input:disabled+label{background:var(--paper);color:var(--muted);border-color:var(--line);cursor:not-allowed}.reservation{margin:var(--space-2xs)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}