/* 土台：リセット・色などの変数・組み込みの見た目・共通の部品・body・上のバー */

/* ---- destyle ---- */
*{box-sizing:border-box;max-width:100%;}::before,::after{box-sizing:inherit;}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}body{margin:0;}main{display:block;}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0;}h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit;font-weight:inherit;margin:0;}ul,ol{margin:0;padding:0;list-style:none;}dt{font-weight:bold;}dd{margin-left:0;}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1pxsolid;margin:0;clear:both;color:inherit;}pre{font-family:monospace,monospace;font-size:inherit;}address{font-style:inherit;}a{background-color:transparent;text-decoration:none;color:inherit;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underlinedotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:inherit;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;vertical-align:bottom;}embed,object,iframe{border:0;vertical-align:bottom;}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;border:0;background:transparent;padding:0;margin:0;outline:0;border-radius:0;text-align:inherit;}[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;}[type="radio"]{-webkit-appearance:radio;appearance:radio;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer;-webkit-appearance:none;appearance:none;}button[disabled],[type="button"][disabled],[type="reset"][disabled],[type="submit"][disabled]{cursor:default;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1pxdottedButtonText;}select::-ms-expand{display:none;}option{padding:0;}fieldset{margin:0;padding:0;border:0;min-width:0;}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}label[for]{cursor:pointer;}details{display:block;}summary{display:list-item;}[contenteditable]{outline:none;}table{border-collapse:collapse;border-spacing:0;}caption{text-align:left;}td,th{vertical-align:top;padding:0;}th{text-align:left;font-weight:bold;}template{display:none;}[hidden]{display:none;}

/* ---- variable ---- */
/* color（ライト／ダークは <html data-theme> で切り替える。選んだ色は localStorage の shinobi-auth-theme に覚え、管理画面と共通にする） */
:root {
  --color-light: rgb( 253, 254, 255 );     /* 色の付いた地（緑・灰色・濃い色）の上の文字。ダークでも明るいまま */
  --color-dark: rgb( 55, 50, 50 );         /* 濃い地（基本情報の見出し・お知らせ・特技表の印） */
  --color-enabled: rgb( 50, 120, 60 );
  --color-disabled: rgb( 143, 143, 143 );
  --color-selected: rgb( 200, 100, 0 );
  --color-enabled-trans: rgba( 50, 120, 60, 0.6 );
  --color-bg: rgb( 253, 254, 255 );        /* 画面の地。色の付いた枠どうしの間の線もこの色（すき間に見せる） */
  --color-page: rgb( 244, 246, 244 );      /* サインインの画面の地 */
  --color-text: rgb( 55, 50, 50 );         /* 文字 */
  --color-frame: rgb( 55, 50, 50 );        /* 基本情報などの枠の線 */
  --color-line: rgb( 227, 231, 239 );      /* 上のバー・アカウントのメニューの薄い線 */
  --color-hover: rgb( 248, 249, 252 );
  --color-muted: rgb( 104, 112, 134 );
  --color-field-disabled: rgb( 222, 222, 222 );
  --color-stripe: rgb( 230, 230, 230 );    /* チェックの結果の一覧の 1 行おき */
  --color-error: rgb( 200, 0, 0 );
  --color-tag-taima: #000066;              /* 背景のフォームの [退] [現] [戦] */
  --color-tag-present: #707000;
  --color-tag-sengoku: #982023;
  color-scheme: light;
  /* メニュー（admin-menu.js）とアカウントのメニューが使う名前 */
  --surface: var(--color-bg);
  --surface-2: var(--color-hover);
  --line: var(--color-line);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --accent: var(--color-enabled);
  --accent-weak: rgba( 50, 120, 60, 0.12 );
  --radius: 12px;
}
:root[data-theme="dark"] {
  --color-dark: rgb( 70, 78, 94 );
  --color-enabled: rgb( 62, 140, 74 );
  --color-disabled: rgb( 112, 117, 128 );
  --color-selected: rgb( 230, 130, 40 );
  --color-enabled-trans: rgba( 62, 140, 74, 0.6 );
  --color-bg: rgb( 20, 24, 31 );
  --color-page: rgb( 14, 17, 22 );
  --color-text: rgb( 226, 230, 238 );
  --color-frame: rgb( 96, 104, 120 );
  --color-line: rgb( 44, 51, 68 );
  --color-hover: rgb( 32, 38, 52 );
  --color-muted: rgb( 154, 163, 184 );
  --color-field-disabled: rgb( 40, 45, 56 );
  --color-stripe: rgb( 32, 38, 50 );
  --color-error: rgb( 255, 107, 107 );
  --color-tag-taima: rgb( 140, 160, 255 );
  --color-tag-present: rgb( 210, 200, 90 );
  --color-tag-sengoku: rgb( 240, 110, 110 );
  --accent-weak: rgba( 62, 140, 74, 0.25 );
  color-scheme: dark;
}
/* border */
:root {
  --border-light: 1px solid var(--color-bg);   /* 色の付いた枠どうしの間の線（すき間に見せる） */
  --border-dark: 1px solid var(--color-frame);
  --border-enabled: 1px solid var(--color-enabled);
  --border-disabled: 1px solid var(--color-disabled);
  --border-selected: 1px solid var(--color-selected);
}
/* transition */
:root {
  --trans-default: background-color .3s, border-color .3s, color .3s;
}
/* shadow */
:root {
  --shadow-enabled: 0 0 5px var(--color-enabled);
  --shadow-disabled: 0 0 5px var(--color-disabled);
  --shadow-selected: inset 0 0 3px var(--color-selected);
}
/* z-index */
:root {
  --z-highest: 99;
  --z-higher: 9;
}
/* 骨組みの大きさ（2026-10-26 に作り直した。狭い画面も同じ文字の大きさで、並びだけ変える） */
:root {
  --topbar-h: 61px;       /* 上のバー。管理画面（上下 12px のすき間＋ボタン 36px＋下の線 1px）とそろえる */
  --sidebar-w: 400px;     /* 左の操作パネル（開いたとき。2026-10-26 に 340px から広げた：検索の欄が窮屈だった） */
  --rail-w: 48px;         /* 操作パネルをたたんだときに残す帯 */
  --radius-s: 8px;        /* 枠の角 */
  --radius-xs: 6px;
  --field-h: 36px;        /* 入力欄とボタンの高さ */
}

/* ---- built-in-styles ---- */
/* flex */
.center-center {display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:center;}
/* div, td */
div[disabled] *, td[disabled] * {cursor: default;}
div.switch, td.switch {color:var(--color-enabled);border:var(--border-enabled);}
div.switch[disabled], td.switch[disabled] {color:var(--color-disabled);border:var(--border-disabled);}
div.caption.switch, td.caption.switch {color:var(--color-light);border:var(--border-enabled);background-color:var(--color-enabled);}
div.caption.switch[disabled], td.caption.switch[disabled] {border:var(--border-disabled);background-color:var(--color-disabled);}
/* input, select */
.switch {transition:var(--trans-default);}
select {cursor:pointer;}
select[disabled] {cursor:default;}
input.switch, select.switch {background-color: transparent;}
input.switch[disabled], select.switch[disabled] {background-color: var(--color-field-disabled);}
input.switch, select.switch {color:var(--color-enabled);}
input.switch[disabled], select.switch[disabled] {color:var(--color-disabled);}
input.center, select.center {text-align:center;}
input.start, select.start {text-align:start; padding-left:8px;}
input[type='text'] {color: var(--color-text);}
input[type='button']:active {opacity: .8;}
input[type='button'][disabled]:active {opacity: 1;}
input[type='text'] {color: var(--color-text);}
textarea {line-height: 1.5em;}
/* ダークのとき、選ぶ欄を開いた一覧は、ブラウザが白い地で描くことがある（文字が見えにくい）ので、一覧の地と文字の色を決めておく */
:root[data-theme="dark"] option, :root[data-theme="dark"] optgroup {background-color: rgb(32, 38, 52); color: var(--color-text);}

/* ---- parts ---- */
/* toggle（保護する・共有・判定の切り替え） */
.toggle {display:inline-block;position:relative;width:40px;height:20px;border-radius:20px;background-color:var(--color-disabled);cursor:pointer;transition:background-color .3s;flex:none;}
.toggle input {display: none;}
.toggle + .caption {color: var(--color-disabled);padding-top:1px;margin-left:8px;transition:color .3s;}
.toggle:has(:checked) {background-color: var(--color-enabled);}
.toggle:has(:checked) + .caption {color: var(--color-enabled);}
.toggle::after {position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);background-color:white;content: '';transition: left .3s;}
.toggle:has(:checked)::after {left: 20px;}
/* tip（上から出るお知らせ） */
.tip {z-index:110;position:fixed;top:0px;left:0px;height:auto;width:100vw;background-color:var(--color-dark);color:var(--color-light);padding:20px;font-size:1.1em;transform:translateY(-100%);transition:transform .5s, background-color .3s;}
.tip.show {transform:translateY(0); cursor: pointer;}
body[busy] .tip.show {pointer-events: none; cursor: default;}
/* spin */
@keyframes spin {
  from {transform: rotate(0);}
  to {transform: rotate(359deg);}
}
.spinner {width:90px;height:90px;border:5px solid #fb5b53; border-top:5px solid transparent; border-radius:50%; animation: spin .5s linear 0s infinite}
/* clip（コピーしたときの印） */
@keyframes notify-clip {
  0% {opacity:0;transform:translateY(-100%);}
  30% {opacity:.8;}
  50% {opacity:1;transform:translateY(0);}
  100% {opacity:0;transform:translateY(100%);}
}
.clip-message {position:fixed;z-index:var(--z-highest);font-size:1.5em;top:0px;left:0px;height:auto;width:auto;color:var(--color-selected);text-decoration:underline;opacity:0;pointer-events:none;padding: 20px 20px 17px 20px;}
.clip-message.notify {animation: notify-clip .6s linear;}
/* reg */
reg {
   font-size: 10px;
}
/* credential（チェックの結果。上のバーの下を全部おおう） */
#credential {
  z-index: 95;
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  height: calc(100vh - var(--topbar-h));
  width: 100vw;
  pointer-events: none;
  display: none;
  background-color: var(--color-bg);
  overflow: auto;
  font-size: 16px;
}
#credential:has( #credential-state:checked) {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  flex-direction: column;
}
#credential:has( #credential-small:checked) {
  height: 60px;
  overflow: hidden;
}
body:has( #credential-state:checked) {
  overflow: hidden;
}
body:has( #credential-small:checked) {
  overflow: auto;
}
#credential .controller {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  gap: 12px;
  border-bottom: 1px solid var(--color-line);
  padding: 10px 20px;
}
#credential .controller > * {
  height: 100%;
  width: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: bold;
  border: var(--border-enabled);
  border-radius: var(--radius-s);
  color: var(--color-enabled);
  cursor: pointer;
}
#credential .view {
  height: calc(100% - 60px);
  width: 100%;
  padding: 10px 20px;
  font-size: 1em;
  line-height: 1.8em;
}
#credential:has( #credential-small:checked) .view {
  height: 0;
  padding: 0;
}
#credential .view h3 {
  padding-top: 10px;
}
#credential .view ul + h3 {
  margin-top: 10px;
  border-top: 1px dashed var(--color-muted);
}
#credential .view ul.checklist {
  list-style:  none;
}
#credential .view li.bullet {
  display: table;
  width: 100%;
}
#credential .view ul li {
  padding-top: 2px;
}
#credential .view ul li:nth-child(even) {
  background-color: var(--color-stripe);
}
#credential .view div.left {
  display: table-cell;
  text-align: left;
}
#credential .view div.right {
  display: table-cell;
  text-align: right;
}
#credential .view li.score {
  text-align: right;
}
#credential .view .green {
  color: #26ee00;
}
#credential .view .red {
  color: #ff0026;
}
#credential .view .yellow {
  color: #eeb700;
}
#credential .view .question {
  background: #222222;
  color: #FFFFFF;
}
#credential .view .essential,.collateral,.signal {
  font-weight: 700;
}

/* ---- body ---- */
body {
  background-color: var(--color-bg);
  user-select: none;
  font-size: 16px;
  color: var(--color-text);
}
/* 読み取り専用（?readonly=true）や読み込みの途中は、操作パネルと本体を押せなくする（URL をコピー・別ウィンドウは押せる） */
body[locked] #sidebar,
body[locked] #main,
body[locked] #sidebar *,
body[locked] #main * {
  pointer-events: none;
}
body[locked] #sidebar .not-locked,
body[locked] #main .not-locked {
  pointer-events: all;
}
body[locked][busy] #sidebar .not-locked,
body[locked][busy] #main .not-locked {
  pointer-events: none;
}
body[busy] #sidebar,
body[busy] #main {
  opacity: .7;
}

/* ---- topbar ---- */
/* 上のメニューバー（管理ページと同じ形）。左にハンバーガーのメニュー・アイコン・アプリ名、右にアカウント（共有の部品） */
#topbar {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 0 12px;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
body:not([data-auth="in"]) #topbar {
  display: none;
}
#topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 1.05em;
  white-space: nowrap;
}
#topbar .brand img {
  width: 32px;
  height: 32px;
}
/* 共有の部品（アカウントのメニュー・ハンバーガーのメニュー）は、管理画面と同じ大きさ */
#topbar .sam-account {
  font-size: 16px;
}
#admin-menu {
  width: 270px;
  font-size: 16px;
}
@media screen and (max-width: 599px) {
  #topbar .brand div {
    display: none;   /* 狭い画面はアプリ名を出さず、アイコンだけ */
  }
}