/* KosherRep: over the admin page's and the legal pages' own styles. Paper, ink and one blue, like a printed book:
   no gradients, no shadows, nearly square corners. Frank Ruhl Libre is under the SIL Open Font License 1.1. */
@font-face {
  font-family: "Frank Ruhl Libre"; font-weight: 300 700; font-display: swap;
  src: url(/themes/frank-ruhl-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre"; font-weight: 300 700; font-display: swap;
  src: url(/themes/frank-ruhl-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #f8f5ee; --card: #fffdf9; --text: #1a2336; --muted: #5d6170; --line: #ddd6c7;
  --accent: #1b3f7a; --green: #2f6b4a; --red: #9c2b2e; --radius: 3px;
  /* the menu's, tiles' and charts' colors: quiet ones, that sit together on paper */
  --c1: #1b3f7a; --c2: #7a2f3b; --c3: #8a6a24; --c4: #4f6339; --c5: #5d6170; --c6: #2f6b6b; --c7: #4a4f8a;
  --bright: #1b3f7a; --btn: #1b2f55;
  --serif: "Frank Ruhl Libre", "David", "Times New Roman", serif;
}
h1, h2, .brand, #kosherDialogTitle { font-family: var(--serif); letter-spacing: 0; }
h1 { font-weight: 500; font-size: 30px; }
h2 { font-weight: 500; }

/* the mark: the two tablets, drawn in a line */
.brand { font-weight: 500; }
.brand i, .side .brand i, .topbar .brand i { background: url(/themes/kosher.svg) center / contain no-repeat; border-radius: 0; }
.brand i::after { display: none; }

/* the login, over the home page's alley, on a sheet of paper */
#login { background: linear-gradient(#0a0f1c66, #0a0f1c66), url(/themes/kosher-hero.jpg) center / cover; }
#login form { background: var(--bg); padding: 36px 32px 28px; box-shadow: 0 24px 70px #00000080; }
#login form .link, #login .legal a, #homeLink { color: var(--muted); }

/* the tallit's stripes, over the menu */
#accept, #shabbatScreen, .side, article { position: relative; }
#accept::before, #shabbatScreen::before, .side::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 18px;
  background: linear-gradient(var(--btn) 0 5px, #0000 5px 8px, var(--btn) 8px 10px, #0000 10px 13px, var(--btn) 13px 15px, #0000 15px);
}
.side { padding-top: 40px; }

.btn, .btn.ghost, input, select, textarea, .qgroup select, .qbtn, .slot .days button, .switch, .badge, .tag, .ikind,
.call, #calls > .empty, .call .csum, .call .cneed, .call .badge, .call.cpart, .cnote, .digest, .digest .todo, .digest .tips,
.issue .ifix, .icall, .niqqud, .player, .transcript, .transcript .line, #versionList, .side nav a, .side nav .group.agent, .side nav .fold {
  border-radius: var(--radius);
}
.btn, .card, .call, .player, #sim.live, nav .group.agent a.on, .switch button.on { box-shadow: none; }
.btn:hover { opacity: 1; background: var(--accent); }
.btn.ghost { border-color: var(--btn); color: var(--btn); }
.btn.ghost:hover { background: #1b2f550f; color: var(--btn); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px #1b3f7a26; }
.slot .days button.on { background: var(--btn); border-color: var(--btn); }

/* the menu: a line beside the page shown, in place of the colored dots */
.side nav a::before { display: none; }
.side nav a { color: var(--text); border-inline-start: 2px solid #0000; }
.side nav a.on, .side nav .group.agent a.on { background: none; border-inline-start-color: var(--btn); color: var(--btn); }
.side nav a:hover { background: #1a23360a; }
.side nav .group.agent { background: none; border: 1px solid var(--line); }
#quick, .topbar { background: #f8f5eee6; }
.call .csum { background: #f3efe5; }
.col .fill, .col.now .fill { background: var(--c1); border-radius: 0; }
.meter, .meter i { border-radius: 0; }
.meter { background: #1b3f7a1f; }
.meter i { background: var(--c1); }
.switch button, .switch button.on { border-radius: 2px; }
#dial, #dial.live { box-shadow: none; }

/* the legal pages */
article { box-shadow: none; border-radius: var(--radius); }
header .brand { color: var(--text); }
.key { background: #f3efe5; }